Can you please take a look at This demo let me know how I can force Javascript to push the items into the array based on the items id?

<!-- begin snippet: js hide: false -->

<!-- language: lang-js -->

1.     var theArray = [
2.         ["A", "B", "C"],
3.         ["D", "E"],
4.         ["F", "G", "H", "I"],
5.         ["J"],
6.         ["K", "L", "M"]
7.     ];
8.     var res = theArray.toString();
9. 
   
10.     $('#textarea').text(res);
11. 
    
12.     $("input[name='m1']").change(function () {
13.         if ($(this).is(':checked')) {
14.             var id=$(this).attr('id');
15.             var selected = $(this).val();        
16.             theArray[1][id] = selected;
17.             
18.         } else {
19.             var itemtoRemove = $(this).val();
20.         theArray[1].splice($.inArray(itemtoRemove, theArray[1]),1);
21. 
    
22.         }
23.         var res = theArray.toString();
24.     $('#textarea').text(res);
25.         
26.     });
27. 
    
28. 
    
29. <!-- language: lang-html -->
30. 
    
31.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
32.     <br />
33.     <textarea id="textarea" rows="2" cols="100"></textarea>
34.     <br />
35.     <br />
36.     <fieldset>
37.         <legend>Items</legend>
38.         <input type="checkbox" id="1" name="m1" value="mItem1" />mItem 1
39.         <br />
40.         <input type="checkbox" id="2" name="m1" value="mItem2" />mItem 2
41.         <br />
42.         <input type="checkbox" id="3" name="m1" value="mItem3" />mItem 3
43.         <br />
44.         <br />
45.     </fieldset>

As you can see the example works if you un check from `mItem 3` to `mItem 3` but if you uncheck `mItem 1` first and check it again it will overwrite the mitem2 in the array (which make seance!)

Can you please let me know how i can fix this?

Thanks