Select and deselect multiple checkbox and store date into JavaScript set for unique value

<form method="post" action="/live-yearly" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
<input type="hidden" name="selectedLiveValue" id="selectedLiveValue" required>
<input type="submit" value="Live">
</form>

 <th><input type="checkbox" id="selectAll"></th>

  <td><input type="checkbox" class="id" value="{{ $d->id }}" name="ids" ></td>
  <td><input type="checkbox" class="id" value="{{ $d->id }}" name="ids" ></td>
  <td><input type="checkbox" class="id" value="{{ $d->id }}" name="ids" ></td>
  <td><input type="checkbox" class="id" value="{{ $d->id }}" name="ids" ></td>

<script>
 var  selectedIds = new Set();


$(document).ready(function() {
$("#selectAll").click(function(){

if(! $(this).prop("checked")) {
              $(".id").prop("checked", false);
              $("#selectedLiveValue").val("");
              selectedIds.clear();
          } else {
              $(".id").prop("checked", true);
              $('input[name="ids"]:checked').each(function() {  
   selectedIds.add(this.value);
   selectedIds.forEach(function(value) {
  $("#selectedLiveValue").val(value+","+$("#selectedLiveValue").val());
});
});
   }  
        //  console.log($('input[name="ids"]:checked').serialize());
});


});

$(".id").click(function(){
  $("#selectedLiveValue").val("");
  if( $(this).prop("checked")) {
    selectedIds.add($(this).val());
  }else{
    selectedIds.delete($(this).val());
  }

selectedIds.forEach(function(value) {
  $("#selectedLiveValue").val(value+","+$("#selectedLiveValue").val());
});

});


  </script>