JS Function Checks all Checkboxes, which is not needed

Sorry that the title is very weird. So, I am using Visual Studio MVC and I am creating a website. I have 5 rows of 30 buttons in bootstrap. When you click on these buttons a modal pops up with a checkbox. When the checkbox is clicked, it makes the modal button change to red. Unfortunately, it checks all the checkboxes for each button and each modal. I have a feeling it's because of the id or something, but I cannot change each id for each button because I am creating over 150 buttons. So I need only 1 button to change colors when the checkbox is clicked. I have added the jsfiddle, for a more simple view.Thank you for all your help.

---

This is related to another post I created: Link

JSFiddle: Fiddle Link

So far I have:

@{int k= 0;}
@for (int j = 0; j < 5; j++) { 
    @for (int i = 0; i < 30; i++)
    {
        k = k + 1;

    }
}

Inside the second for loop is:

<button id="btn1" type="button" class="btn btn-primary btn-xs gridbtn" data-toggle="modal" data-target="#myModal">@k</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">@(k)</h4>
     </div>
     <div class="modal-body">
       <form role="form">
         <div class="checkbox callback-to-button">
           <label><input type="checkbox"> Remember me</label>
         </div>
         <button type="submit" class="btn btn-default" data-dismiss="modal">Submit</button>
       </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>