How to implement Multiple Checkbox in a pagination based table with Check/Uncheck All and then store all selected checkbox IDS into localstoarge

I am not JavaScript expert. I am trying to implement some features in my table where I have a list of patients. I tried many ways, but can't be able to implement all features together from different approaches. What I am trying to do in my table is:

• Check/Uncheck Patients.
• Check/Uncheck all should work on all paginated pages.
• Store selected patients IDs into local storage.
• Whenever clicking on Check/Uncheck checkbox and individual checkbox, it should update & save the updated selected patient IDs into local storage.
• At the end, I just need the local storage Key. contains all selected patient IDs.

Here is the image of the patient table

HTML

<div class="table-responsive">
  <table class="table" id="table">
    <thead>
      <tr class="text-muted">
        <th scope="col">
          <!---------------- Check / Uncheck All Checkboxes ----------->
            <input type="checkbox">
          <!----------------/ Check / Uncheck All Checkboxes ----------->
          <span class="d-none d-md-inline d-lg-inline select_counter"></span>
        </th>
        <th class="col-2">Patient</th>
        <th class="col-1">Age</th>
        <th class="col-1">Gender</th>
        <th class="col-1">Diagnosis</th>
        <th class="col-1">Medication</th>
        <th class="col-1">Last Rx</th>
      </tr>
    </thead>
    <tbody>
      <% @list_users.each.with_index(1) do |patient, index| %>
        <tr>

          <td class="col-1">
          <!---------------- Checkbox To Select Each Patient ------------->
             <input type="checkbox" id="<%= patient.id %>">
          <!---------------/ Checkbox To Select Each Patient ------------->
          </td>

          <td>
          <%=link_to user_name(patient.id)&.strip&.upcase, centres_ebroadcasts_find_by_id_path(user_id: patient.id,source:'patient_table'), :class=>"text-dark", remote:true %>
          </td>
          <td><%= patient&.date_of_birth? ? Date.today.year - patient&.date_of_birth.year : " -- " %></td>
          <td><%= patient.gender? ? patient.gender : "--" %></td>
          <td class="col-2">
            <% diagnosis = patient.consultations.map(&:diagnosis)%>
              <% if diagnosis.compact.empty? %>
                <span class="text-danger">No Diagnosis</span>
              <% else %>
                <%= truncate_text(diagnosis.uniq.compact.join(", "),120).upcase %>
            <% end %>
          </td>
          <td class="col-2">
            <% if medicine = patient&.prescriptions&.completed_prescriptions.map(&:medicines).empty? %>
              <span class="text-danger">No Medicines</span>
            <% else %>
              <%= truncate_text(patient&.prescriptions&.completed_prescriptions.map(&:medicines).flatten.map(&:name).uniq.compact.join(", "), 120).upcase %>
            <% end %>
          </td>
          <td class="col-2"><%= patient&.prescriptions&.completed_prescriptions&.first&.created_at&.strftime("%d, %B, %Y")%></td>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>

<!----------- Javascript --------->
<script>
</script>
<!----------/ Javascript --------->

Issues: When I was trying different approaches, I faced several issues in pagination. For example: checkboxes are only working on current paginated page. Check/Uncheck only works on current paginated page.

Could anyone please help me to implement this? Pure JavaScript or jQuery, any can be used.