jquery - Using input from checkbox to change color of button -

i have 5 rows of 30 buttons of green buttons. modal pops when button clicked. inside modal checkbox. when checkbox checked, need button it's in change red color. i've tried few things, haven't worked. ideas?

html:

            <button type="button" class="btn btn-primary btn-xs gridbtn" data-toggle="modal" data-target="#mymodal">number</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">testing</h4>                         </div>                         <div class="modal-body">                             <form role="form">                                 <div class="form-group">                                     <label for="email">email address:</label>                                     <input type="email" class="form-control" id="email">                                 </div>                                 <div class="form-group">                                     <label for="pwd">password:</label>                                     <input type="password" class="form-control" id="pwd">                                 </div>                                 <div class="checkbox">                                     <label><input type="checkbox"> remember me</label>                                  </div>                                 <button type="submit" class="btn btn-default">submit</button>                             </form>                         </div>                         <div class="modal-footer">                             <button type="button" class="btn btn-default" data-dismiss="modal">close</button>                         </div>                     </div>                 </div>             </div> 

html:

add ids different buttons

<button id="btn1" type="button" class="btn btn-primary btn-xs gridbtn" data-toggle="modal" data-target="#mymodal">number</button> <button id="btn2" type="button" class="btn btn-primary btn-xs gridbtn" data-toggle="modal" data-target="#mymodal">number</button> <button id="btn3" type="button" class="btn btn-primary btn-xs gridbtn" data-toggle="modal" data-target="#mymodal">number</button> 

add class checkbox

<div class="checkbox callback-to-button"> 

js:

$('#mymodal').on('show.bs.modal', function (event) {   var button = $(event.relatedtarget); // button triggered modal   $(this).find('.modal').attr('data-triggered', $(button).attr('id')); })  $('.callback-to-button').click(function() {     var target = $(this).closest('.modal').attr('data-triggered');     if ($(this).find('[type=checkbox]').prop('checked')) {         $('#'+target).css('background-color', 'red');     }     else {         $('#'+target).css('background-color', '');     } }); 

see in action: here