Apply checkbox for two tables in jsp using

In the jsp, I have two tables for two different type of users (administrator and secretary) to view. Those tables has checkbox for download multiple files.

I have a strange (I think) situation which is only one type of user (administrator) can check all checkboxes by click the checkbox near the first table column.

I would like to show you the code about those table first.

<script type="text/javascript">
$(document).ready(function() {
$("#clickAll").click(function() {
    if($(this).is(':checked'))
       {
         $("input[name='chkdownload']").each(function() {
             $(this).attr("checked",true);
         });
       }
       else
       {
         $("input[name='chkdownload']").each(function() {
             $(this).attr("checked",false);
         });           
       }
    });
});
var countChecked = function() {
    var n = $( "input:checked" ).length; 
    if (n == 0) { 
        alert("Please click at least one record.");
        return false;
    } else {
        return true;
    }

}; 
</script>

<div class="content">
<s:form namespace="/DownloadFile" action="download_getSelectedFile" method="POST" enctype="multipart/form-data">

<!--for administrator users to view -->
<div class="usrAdmin usrAccess" style="display:none">
<display:table name="${equipmentList}" class="its" uid="row"
    sort="list" pagesize="10" requestURI="equipment_view" export="false" defaultsort="1" defaultorder="descending">
  <display:columntitle="<input type='checkbox' name='selectall' id='clickAll'/>"><s:checkbox theme="simple" name="chkdownload" fieldValue='%{#attr.row.recordId}' /></display:column>
  <display:column property="equipName" title="Equipment Name" />
  <display:column property="equipLocation" title="Equipment Location" />
  <display:column property="equipOfficer" title="Equipment Officer" />
  </display:table>
</div>

   <!--for secretary users to view -->
   <div class="usrSec usrAccess" style="display:none">
<display:table name="${equipmentList}" class="its" uid="row"
    sort="list" pagesize="10" requestURI="equipment_view" export="false" defaultsort="1" defaultorder="descending">
  <display:column title="<input type='checkbox' name='selectall' id='clickAll'/>"><s:checkbox theme="simple" name="chkdownload" fieldValue='%{#attr.row.recordId}' /></display:column>
  <display:column property="equipName" title="Equipment Name" />
  <display:column property="equipLocation" title="Equipment Location" />
  <display:column property="equipOfficer" title="Equipment Officer" />
</display:table>
</div>

<input type="submit" value="Download Selected"/>
</s:form>
</div>

When I run the program, if I switch to secretary mode, I click the checkbox near the header column, it does not checked all checkboxes. It just shows a "tick" symbol in the checkbox only. However if I switch to administrator mode, I click the checkbox, it can checked all checkboxes.

At the beginning, I think maybe I mistype the incorrect name in jquery, but I review the code, both table are call the same input "chkdownload".

I have read the solution from this and this post, but I think my case is different to them.

Which part I did wrong in the code? It seems no typo error there. Otherwise, the checkbox in administrator mode will not work too.

Would someone let me know my mistake, please? Thanks a lot.