On selecting a checkbox, tick checkboxes of another div

I have a dynamic grid. The structure of the grid is as follows:

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

Against every serial number, there is a checkbox. And in the attachment column when you click the image it opens a dialog box that shows the files attached against this document name. Each attachment also has a checkbox against it.

This dialog box opens on an on click function and comes from another dynamic grid.

What I want to do is that if I select checkbox against serial no 1, it should check all checkboxes in the dialog box of the same serial number . so basically the serial number checkboxes is a parent checkbox and the checkboxes in the dialog box will be their child checkboxes.

Now if the user has checked a parent checkbox, the checkboxes in dialog box will be automatically checked, but if the user unchecks all checkboxes in that dialog box then parent checkbox should also be unchecked automatically.

How do I achieve this?

I have tried so many sample codes since last 4 hours but in vain. I tried doing this

Below is the code

    $('.activity_selection').live('click', function (e) {
        var table = $(e.target).closest('table');
        $('td input:checkbox', table).attr('checked', e.target.checked);

    }); 

.activity_selection is a class that I have given to checkboxes against serial numbers. But it selects all the checkboxes against all serial numbers that are 1 to 4. What I want is that it checks only checkboxes in the current dialog box? How can I achieve this using javascript or jquery? I have many other sample codes but it did not work. Please help.

Html of the main grid:

<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" /> </tr>
</table>

Dialog Box:

<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></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></div></td></a><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></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></div></td></a><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>

Can anybody help me?