How to add attributes to a variable on the selection of multiple checkboxes

Hi I have a grid which looks something like this:

  Serial No                  Document Name       Attachment
1(checkbox)                  abc               (img)
2(checkbox)                   xyz               (img)
3(checkbox)                   uio               (img)
4(checkbox)                   pop               (img)

When you click on the img on Attachement ,it opens a dialog box which has attached mutiple documents .AND there is a checkbox against each document.

Now what I want to do is if the user selects those checkboxes then it should add the attribute documentcode to a variable, similarly if the user checks another document, it appends that attribute to that varaiable and thus form a string. Also, if the user selects checkbox against serial number 1, the checkboxes against that relevant dialog box also gets checked. So in this case I want to append attributes too.

For this purpose, I added an onclick function on the checkbox of the dialog box

    var docCodes = '';
    function addAttributes(docID, CdCode, el) {
        var DocumentCode = docID;
        var CdCode = CdCode;

          if ($(el).is(':checked')) 
            {
                docCodes += DocumentCode + '♦';
                alert(docCodes);
                console.log(docCodes);
            }

        }

Now when I am selecting checkboxes in dialog box it appends the document code , however when I uncheck it , it should remove that document code which is not happening. How do I do this? Also on parent checkbox, the attributes should get appended too

Code

//on change of checkbox inside table..
$(document).on("change", "#AttachmentGrid .attachment_selection", function() {

  var total = $(".attachment_selection").length //get length of checked
  var get_code = $("#AttachmentGrid").data("code").split("_")[1] //get code...
  //if all checked..
  if ($(".attachment_selection:checked").length == total) {
    $("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", true) //sno checkbox checked
  } else {
    $("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", false) //remove checbox..
  }

})

function AttchmentBox(id, count, el) {

  //id = _41702 ,_41701..accroding to click
  //el = this 
  if (parseInt(count) > 0) {
    //some code..where you add data inside your attachmnt grid,,
    //...
    $("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", false)
    //if checked in tr..
    if ($(el).closest("tr").find(".activity_selection").is(":checked")) {
      $("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", true) //make checked in dialog as well
    }
    $("#attchment_div #AttachmentGrid").data("code", id) //set this attr 
    $("#attchment_div").show() //show your dialog it..(demo..)//showPopup('attchment_div', true);
  }

}

#attchment_div {
  display: none;
  border: 1px solid black
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<table class="display" width="100%" id="uploadGrid">
  <thead>
    <tr>
      <th class="Greyheader">
        <input type='checkbox' id='selectAll'>
        <br/>S.No</th>
      <th class="Greyheader">Document Name</th>
      <th class="Greyheader">Browse</th>
      <th class="Greyheader">Attachment</th>
      <th class="Greyheader">Save</th>
    </tr>
  </thead>
  <tr id="517" cdCode="41701" mandatory="N">
    <td class="GreyBorder">
      1&nbsp;&nbsp;
      <input type='checkbox' id=chk_517 class='activity_selection'>
    </td>
    <td class="GreyBorder">
      <span>Letter</span>
    </td>
    <td class="GreyBorder" style=" text-align:center !important;">
      <input 
        type="file" 
        multiple="multiple" 
        name="txt_filePath_517" 
        class="mediumTextField" 
        id="txt_filePath_517" 
        style="width: 78%;"
      >
    </td>
    <td class="GreyBorder" style=" text-align:center !important;" align="center">
      <span style="cursor:hand">
        <span class="attch_counter">2</span>
        <img 
          title="Attachment" 
          height="20px" 
          onclick="AttchmentBox('_41701','2',this);" 
          src="../../Images/attchments.png" 
        />
      </span>
    </td>
    <td class="GreyBorder" align="center">
      <img 
        type="image" 
        title="Save" 
        src="../../Images/save.png" 
        id="Btn_517" 
        onclick="SaveAttachment('517','41701','50818','50595');" 
        style="cursor:pointer;height:15px;" 
        class="AddItem" 
      />
    </td>
  </tr>
  <tr id="518" cdCode="41702" mandatory="N">
    <td class="GreyBorder">
      2&nbsp;&nbsp;
      <input type='checkbox' id=chk_518 class='activity_selection'>
    </td>
    <td class="GreyBorder">
      <span>Customer</span>
    </td>
    <td class="GreyBorder" style=" text-align:center !important;">
      <input 
        type="file" 
        multiple="multiple" 
        name="txt_filePath_518" 
        class="mediumTextField" 
        id="txt_filePath_518" 
        style="width: 78%;"
      >
    </td>
    <td class="GreyBorder" style=" text-align:center !important;" align="center">
      <span style="cursor:hand">
        <span class="attch_counter">1</span>
        <img 
          title="Attachment" 
          height="20px" 
          onclick="AttchmentBox('_41702','1',this);" 
          src="../../Images/attchments.png" 
        />
      </span>
    </td>
    <td class="GreyBorder" align="center">
      <img 
        type="image"
        title="Save" 
        src="../../Images/save.png" 
        id="Btn_518" 
        onclick="SaveAttachment('518','41702','50818','50595');" 
        style="cursor:pointer;height:15px;" 
        class="AddItem" 
      />
    </td>
  </tr>
</table>

<div id="attchment_div">
  <table style="width:100%" id="AttachmentGrid">
    <tr>
      <td style="text-align:left; width:40%;">
        <input type='checkbox' id=chkAttachment_78427 class='attachment_selection'>
        <a 
          title="ABC.docx" 
          onclick="showDocument('78427');" 
          style='text-decoration: none;cursor: pointer;'
        >
          <div class='ui-notify-message ui-notify-message-style'>
            <div style='float:left;margin:0 10px 0 0' class='image_path'>
              <img src='../../Images/attchments.png'>
            </div>
            <p>ABC.docx</p>
          </div>
        </a>
      </td>
      <td style="text-align:center; width:35%;">
        <div style='float:left;position:relative;top:-6px;'>
          <div class='date'>
            <span class='day'>10</span>
            <span class='month'>Jun</span>
            <span class='year'>2021</span>
          </div>
        </div>
      </td>
      <td style="width:20%; cursor:hand;">
        <img 
          viewtype="delete" 
          title="Delete Attachment" 
          style="float:right;padding-bottom:20px;" 
          src="../../images/delete.png" 
          onclick="DeleteAttachment('78427','41701')" 
          class="AddItem" 
        />
      </td>
    </tr>
    <tr>
      <td style="text-align:left; width:40%;">
        <input 
          type='checkbox' 
          id=chkAttachment_78424 
          class='attachment_selection'
        >
        <a 
          title="FOSUNDERSTANDING.docx" 
          onclick="showDocument('78424');" 
          style='text-decoration: none;cursor: pointer;'
        >
          <div class='ui-notify-message ui-notify-message-style'>
            <div style='float:left;margin:0 10px 0 0' class='image_path'>
              <img src='../../Images/attchments.png' />
            </div>
            <p>FOSUNDERSTANDING.docx</p>
          </div>
        </a>
      </td>
      <td style="text-align:center; width:35%;">
        <div style='float:left;position:relative;top:-6px;'>
          <div class='date'>
            <span class='day'>09</span>
            <span class='month'>Jun</span>
            <span class='year'>2021</span>
          </div>
        </div>
      </td>
      <td style="width:20%; cursor:hand;">
        <img 
          viewtype="delete" 
          title="Delete Attachment" 
          style="float:right;padding-bottom:20px;" 
          src="../../images/delete.png" 
          onclick="DeleteAttachment('78424','41701')" 
          class="AddItem" 
        />
      </td>
    </tr>
  </table>
</div>