In the realm of web development, managing user input and dynamically updating the user interface are essential for creating responsive and interactive web applications. In this article, we’ll dive into a practical jQuery example that showcases how to handle user input, manage dynamic data, and update the user interface efficiently.

var column_data = [];

jQuery(".box").find("input[name='attributes[]']").each(function () {
	if(jQuery(this).prop('checked') == true){
		var column_name = jQuery(this).val();
		var column_id = jQuery(this).data('id');
		column_data.push({ column_id: column_id, column_name: column_name });
	}
});

console.log(column_data);

jQuery('.input-box input').click(function(){
  if(jQuery(this).prop('checked') == true){
    console.log(jQuery(this).val());
    jQuery('ul#sortable').append(`<li class="ui-state-default"><input type="checkbox" name="attributes[]" value="${jQuery(this).val()}" class="input-text"> ${jQuery(this).val()}</li>`);
    jQuery(this).attr('disabled', true);
  }
  console.log(jQuery(this).prop('checked'));
});