I have a form that consists of check boxes. Each check box has it's own value(value1,value2,value3,value4). After submitting form, values are stored in the database depending on the check box user selected.

So if a user selects first and third check box, values stored in db would be in the format "value1,value3".

Now, i want to provide sorting option to the user. So, if a user selects check box, their values should be shown below as a list and then user should be able to sort values up and down as their preference.

i partially achieved it by using jquery and ajax.

$("input[type='checkbox']").change(function(){
	var data = $('#form').serializeArray();
   	$.ajax({
		url: "{{URL::action('CategoryController@checkboxAjaxRequest')}}",
		type: "GET",
		data: {data: data},
		success: function(response){
			$("ul #sortable").html(response);				
		}
	});
});

The response returned was in the format

<li id="item-value1" style="cursor: pointer;">Value 1</li>
<li id="item-value2" style="cursor: pointer;">Value 2</li>

i used the response and added it to an already present blank unordered list with an id of "sortable"

I further used jQuery to make this list sortable

 $('ul').sortable({
	axis: 'y',
	stop: function (event, ui) {
		var data = $(this).sortable('serialize');
	    
	    $("input[id='opt_sort']").attr('value', data);
	}
 });

i created a hidden input whose value was filled with the sorted list order and used this input to check and store the check boxes.

So, now user can select checkbox and then sort it.

All works fine, but there is one problem. If a user checks some checkbox and then sorts the list as his preference and then again check another checkbox, the already sorted list resets. So user has to sort again from start.

i tried various approaches to solve this but was unable to solve this problem. Any solution?