How to check if user unchecked checkboxes and keep them unchecked when he opens a box again

I have this little query.

The problem is when I click on No 1 checkbox(CRL) and then click on the attachment image in the same row, All the checkboxes inside that dialog box will get checked.

Now suppose I unchecked one checkbox say : Book1.xlxs and then close the dialog and open the dialoag again, all checkboxes will be checked again.

Is there any way if the user unchecks it then it should remain unchecked, even if he opens or close that dialog box again?

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

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

})

function AttchmentBox(id, count, el) {

  if (parseInt(count) > 0) {

    $("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", false)

    if ($(el).closest("tr").find(".activity_selection").is(":checked")) {
      $("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", true)
      //sno is checked call your function: 
      addAttributes()

    }
    $("#attchment_div #AttachmentGrid").data("code", id)
    $("#attchment_div").show()
  }

}
var docCodes = [];

function addAttributes(docID, CdCode, el) {
  //el == undefined call from AttchmentBox
  if (el == undefined) {
    //loop through checked checkbox...
    $(".attachment_selection:checked").each(function() {
      var str = $(this).attr("id").split("_")[1]; //id=chkAttachment_78424 .etc
      //if not inside array
      if (docCodes.indexOf(str) == -1) {
        docCodes.push(str) //push that in array
      }
    })

  } else {
    var str = docID;
    //if checked..and not inside array
    if ($(el).is(':checked') && docCodes.indexOf(str) == -1) {
      docCodes.push(str)
    } else {
      docCodes.splice(docCodes.indexOf(str), 1) //remove it..
    }
  }
  console.log(docCodes.toString())
}

//on change of table checkboxes
function addAttr(el) {
  var data_attr = $(el).data("code").split(",")
  if ($(el).is(":checked")) {
    $(data_attr).each(function(i) {
      if (docCodes.indexOf(data_attr[i]) == -1) {
        docCodes.push(data_attr[i]) //push that in array
      }
    })
  } else {

    $(data_attr).each(function(i) {
      docCodes.splice(docCodes.indexOf(data_attr[i]), 1)
    })

  }
  console.log(docCodes.toString())


}

$('#selectAll').on('click', function(e) {
  checkAllBox(this, 'activity_selection');
})

function checkAllBox(obj, clsName) {

  if (obj.checked) { // check select status
    $('.' + clsName).each(function() {
      this.checked = true;
      var data_attr = $(this).attr("data-code").split(",")
      $(data_attr).each(function(i) {
        if (docCodes.indexOf(data_attr[i]) == -1) {
          docCodes.push(data_attr[i]) //push that in array
        }
      })


    });
  } else {
    $('.' + clsName).each(function() {
      this.checked = false;
      var data_attr = $(this).attr("data-code").split(",")
      $(data_attr).each(function(i) {
        docCodes.splice(docCodes.indexOf(data_attr[i]), 1)
      })
    });
  }
  console.log(docCodes.toString())
}

#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 id="uploadGrid" class="display" width="100%">
  <thead>
    <tr>
      <th class="Greyheader"><input id="selectAll" type="checkbox" /> <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>
  <tbody>
    <tr id="517">
      <td class="GreyBorder">1&nbsp;&nbsp;<input id="chk_517" class="activity_selection" onclick="addAttr(this);" type="checkbox" data-code="78424,78427,78428" /></td>
      <td class="GreyBorder">CRL</td>
      <td class="GreyBorder" style="text-align: center !important;"><input id="txt_filePath_517" class="mediumTextField" style="width: 78%;" multiple="multiple" name="txt_filePath_517" type="file" /></td>
      <td class="GreyBorder" style="text-align: center !important;" align="center"><span style="cursor: hand;"><span class="attch_counter">3</span><img class="AttachmentBox" title="Attachment" onclick="AttchmentBox('_41701','2',this);" src="../../Images/attchments.png" height="20px" /></span>
      </td>
      <td class="GreyBorder" align="center"><img id="Btn_517" class="AddItem" style="cursor: pointer; height: 15px;" title="Save" src="../../Images/save.png" /></td>
    </tr>
    <tr id="518">
      <td class="GreyBorder">2&nbsp;&nbsp;<input id="chk_518" class="activity_selection" onclick="addAttr(this);" type="checkbox" data-code="78426" /></td>
      <td class="GreyBorder">XYZ</td>
      <td class="GreyBorder" style="text-align: center !important;"><input id="txt_filePath_518" class="mediumTextField" style="width: 78%;" multiple="multiple" name="txt_filePath_518" type="file" /></td>
      <td class="GreyBorder" style="text-align: center !important;" align="center"><span style="cursor: hand;"><span class="attch_counter">1</span><img class="AttachmentBox" title="Attachment" src="../../Images/attchments.png" height="20px" /></span>
      </td>
      <td class="GreyBorder" align="center"><img id="Btn_518" class="AddItem" style="cursor: pointer; height: 15px;" title="Save" src="../../Images/save.png" /></td>
    </tr>
    <tr id="519">
      <td class="GreyBorder">3&nbsp;&nbsp;<input id="chk_519" class="activity_selection" onclick="addAttr(this);" type="checkbox" data-code="78429" /></td>
      <td class="GreyBorder">ABC</td>
      <td class="GreyBorder" style="text-align: center !important;"><input id="txt_filePath_519" class="mediumTextField" style="width: 78%;" multiple="multiple" name="txt_filePath_519" type="file" /></td>
      <td class="GreyBorder" style="text-align: center !important;" align="center"><span style="cursor: hand;"><span class="attch_counter">1</span><img class="AttachmentBox" title="Attachment" src="../../Images/attchments.png" height="20px" /></span>
      </td>
      <td class="GreyBorder" align="center"><img id="Btn_519" class="AddItem" style="cursor: pointer; height: 15px;" title="Save" src="../../Images/save.png" /></td>
    </tr>

  </tbody>
</table>


<div id="attchment_div">
  <table id="AttachmentGrid" style="width: 100%;">
    <tbody>
      <tr>
        <td style="text-align: left; width: 40%;"><input id="chkAttachment_78428" class="attachment_selection" type="checkbox" onclick="addAttributes('78428','41701',this);" />
          <div class="ui-notify-message ui-notify-message-style">
            <div class="image_path" style="float: left; margin: 0 10px 0 0;"><img src="../../Images/attchments.png" /></div>
            <p>Book1.xlsx</p>
          </div>
        </td>
        <td style="text-align: center; width: 35%;">
          <div style="float: left; position: relative; top: -6px;">
            <div class="date"><span class="day">11</span> <span class="month">Jun</span> <span class="year">2021</span></div>
          </div>
        </td>
        <td style="width: 20%; cursor: hand;"><img class="AddItem" style="float: right; padding-bottom: 20px;" title="Delete Attachment" src="../../images/delete.png" /></td>
      </tr>
      <tr>
        <td style="text-align: left; width: 40%;"><input id="chkAttachment_78427" class="attachment_selection" type="checkbox" onclick="addAttributes('78428','41701',this);" />
          <div class="ui-notify-message ui-notify-message-style">
            <div class="image_path" style="float: left; margin: 0 10px 0 0;"><img src="../../Images/attchments.png" /></div>
            <p>ABC.docx</p>
          </div>
        </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 class="AddItem" style="float: right; padding-bottom: 20px;" title="Delete Attachment" src="../../images/delete.png" /></td>
      </tr>
      <tr>
        <td style="text-align: left; width: 40%;"><input id="chkAttachment_78424" class="attachment_selection" type="checkbox" onclick="addAttributes('78424','41701',this);" />
          <div class="ui-notify-message ui-notify-message-style">
            <div class="image_path" style="float: left; margin: 0 10px 0 0;"><img src="../../Images/attchments.png" /></div>
            <p>FOSUNDERSTANDING.docx</p>
          </div>
        </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 class="AddItem" style="float: right; padding-bottom: 20px;" title="Delete Attachment" src="../../images/delete.png" /></td>
      </tr>
    </tbody>
  </table>
</div>