Unpopulate input field of certian value when box is unchecked

Context:

Adds values to input field:

 $('input:checkbox').change((e) => {
     if ($(e.currentTarget).is(':checked')) {
         var curVal = $('#name').val();
         if (curVal) {
             $('#name').val(curVal + ', ' + e.currentTarget.value);
         } else {

             $('#name').val(e.currentTarget.value);
         }
     } else if (!($(e.currentTarget).is(':checked'))) {
         var curVal = $('#name').val().split(',');
         var filteredVal = curVal.filter(el => el.trim() !== e.currentTarget.value)
         $('#name').val(filteredVal.join(','));
     }
 });

Removes Checkboxes from HTML table:

 const checkboxes = document.querySelectorAll('input[type=checkbox]:checked');
 if (checkboxes.length >= 2) {
     checkboxes[1].checked = false;
     
 }

Problem: When the second box that is checked unchecked, the value is still present in input field. I want the value removed. Can some help me modify the code or find a solution to my problem? I tried everything I could think of and it is not working. Note: Names in input field in photo are fictional.
Pictures:
Input field:
enter image description here

Table:

enter image description here

What I tried was Researching online and trying different things that I found and modifying it to where it fits my project. What I expected to happen was second value in input field gets removed. What really happened is that the second value did not get removed