title: How to append and remove ids on the basis of checkbox checked unchecked in html table?
body: <p>I have written below lines of code in javascript</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on("change", ".commoncheckbox", function() {
      var studentIds = $("#allStudentIds").val().trim();
      $("#tagsOfStudents").show();
      $("#empty_row").remove();
      var id = $(this).val();
      var generatedString;
      if ($(this).is(":checked")) {
        if (studentIds == "") {
          generatedString = id;
        } else {
          generatedString = studentIds + "," + id;
        }
        var uniqueList = generatedString.split(',').filter(function(item, i, allItems) {
          return i == allItems.indexOf(item);
        }).join(',');
        $("#allStudentIds").val(uniqueList);
        var $td = $(this).closest('tr').children('td');
        var name = $td.eq(2).text();
        var gender = $td.eq(4).text();
        var className = $td.eq(3).text();
        var deleteButton = '&lt;button title="Delete" onclick="deleteRow(\'' + id + '\')" class="btn btn-danger  table_btn btn-outline btn-sm"&gt;&lt;i class="fa fa-trash"&gt;&lt;/i&gt;&lt;/button&gt;';
        var html = '&lt;tr id=row_' + id + '&gt;' + '&lt;td&gt;' + name + '&lt;/td&gt;' + '&lt;td&gt;' + className + '&lt;/td&gt;' + '&lt;td&gt;' + gender + '&lt;/td&gt;' + '&lt;td&gt;' + deleteButton + '&lt;/td&gt;' + '&lt;/tr&gt;';
        if ($('#row_' + id).length &gt; 0) {} else {
          $("#selected_students").append(html);
        }
      } else {
        if ($('#row_' + id).length &gt; 0) {
          $("#row_" + id).remove();
        }
      }
    }
  
  );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table&gt;
    &lt;thead&gt;
      &lt;th&gt;&lt;input onclick="checkenabledisable()" id="completebatch" type="checkbox"&gt;&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
      ...
    &lt;/thead&gt;
  
    &lt;tbody id="studentListBody"&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input class="commoncheckbox disabled-check" value="578" type="checkbox" disabled=""&gt;&lt;/td&gt;
        &lt;td&gt;abc&lt;/td&gt;
        &lt;td&gt;abc&lt;/td&gt;
        &lt;td&gt;abc&lt;/td&gt;
        &lt;td&gt;abc&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input class="commoncheckbox" value="357" type="checkbox"&gt;&lt;/td&gt;
        &lt;td&gt;abc&lt;/td&gt;
        &lt;td&gt;abc&lt;/td&gt;
        &lt;td&gt;abc&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
  
        &lt;td&gt;&lt;input class="commoncheckbox" value="123" type="checkbox"&gt;&lt;/td&gt;
        &lt;td&gt;abc&lt;/td&gt;
        &lt;td&gt;abc&lt;/td&gt;
        &lt;td&gt;abc&lt;/td&gt;
        &lt;td&gt;abc&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;input type="hidden" value="" id="allStudentIds"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have added checkboxes with class commoncheckbox inside table body "<em>studentListBody</em>". On the basis of checking and unchecking the checkboxes, the table's data gets successfully appended and deleted respectively inside another table "selected_student". Additionally on the basis of checking and unchecking the checkboxes, I am trying to append the ids of the students (the values of the checked checkboxes) to the hidden input in the line <code>$("#allStudentIds").val(uniqueList);</code> .</p>
  
  <p>Here is how it is storing in hidden input tag whenever checkbox is checked:</p>
  
  <pre><code>input type="hidden" value="5ae957dbbb2c561a10003dc7,5ae9584bbb2c561a10003dca,5ae958a4bb2c561a10003dcc" id="allStudentIds"&gt;
  </code></pre>
  
  <p>Now I am trying to tweak the above code for removing the id from hidden input whenever the checkbox is unchecked.</p>