Check if the codes are in array then make then checked else unchecked

I have a query. The code is working perfectly in the fiddle. But it is not working in my application so I am confused why?

If you run the snippet and check the checkbox against CRL, it will basically add the codes of attachements attached in the attachment heading to array. Now I am checking whether those codes are in the array if yes then make them checked. Somehow this is not working in my application. but is working in snippet. Please help as to what it could be causing.

The line of code that is not working is this

  $(`#attchment_div 
input[id=chkAttachment_${docCodes[i]}]`).prop("checked", true)

I have tried other formats like

$("#attchment_div #AttachmentGrid").find(".attachment_selection").find('input[id=chkAttachment_${docCodes[i]}]').attr("checked", true);

or

$("#attchment_div #AttachmentGrid").find('input[id=chkAttachment_${docCodes[i]}]').attr("checked", true);

//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)
  }

})
var docCodes = [];

function AttchmentBox(id, count, el) {

  if (parseInt(count) > 0) {

    $("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", false)
    var data_codes = $(el).closest("tr").find(".activity_selection").data("code").split(",")
    console.log(data_codes)
    if ($(el).closest("tr").find(".activity_selection").is(":checked")) {
      //check if any datacodes.. present in array
      var found = false;
      for (var i = 0; i < docCodes.length; i++) {
        if (docCodes.indexOf(data_codes[i]) > -1) {
          found = true;
          break;
        }
      }
      //if prsent
      if (found) {
        //show slected data only...
        $(docCodes).each(function(i) {
          if (docCodes.indexOf(data_codes[i]) != -1) {
            $(`#attchment_div input[id=chkAttachment_${docCodes[i]}]`).prop("checked", true)
          }
        })
      } else {
        //show all selected
        $("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", true)
      }

    } else {
      //show selected data,,,bcuz checkbox(snoe) is unchecked
      $(docCodes).each(function(i) {
        if (docCodes.indexOf(data_codes[i]) != -1) {
          $(`#attchment_div input[id=chkAttachment_${docCodes[i]}]`).prop("checked", true)
        }
      })


    }
    //sno is checked call your function: 
    addAttributes()
    $("#attchment_div #AttachmentGrid").data("code", id)
    $("#attchment_div").show()
  }

}


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" type="checkbox" data-code="78424,78427" /></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>


  </tbody>
</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' onclick="addAttributes('78427','41701',this);">
        <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' onclick="addAttributes('78424','41701',this);">
        <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>
<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' onclick="addAttributes('78427','41701',this);">
        <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' onclick="addAttributes('78424','41701',this);">
        <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>