Get checkbox id of the previous one selected

I have this code:

<form>
<table class="table table-bordered">
<thead>
      <tr>
    <th class="thheader">Monday</th>
    <th class="thheader">Tuesday</th>
    <th class="thheader">Wednesday</th>
    <th class="thheader">Thursday</th>
    <th class="thheader">Friday</th>
    </tr>
    </thead>
    <tr>
      <td>
      
      </td>
      <td>
      <center>
      <input type="checkbox" class="colour-button" value="10 - 12" id="btn1012" /><label for="btn1012"> <i class="fa fa-check-circle hide12" id="chk-btn1012"></i>  10am - 12pm</label>
      <input type="checkbox" class="colour-button" value="10 - 12" id="btn1214" /><label for="btn1214" class="labe"><i class="fa fa-check-circle hide12" id="chk-btn1214"></i> 5pm - 7pm</label>
      </center>
      </td>
      <td>
              
      
      </td>
            <td>
            <center>
      <input type="checkbox" class="colour-button" value="10 - 12" id="btn10" /><label for="btn10"><i class="fa fa-check-circle hide12" id="chk-btn10"></i>  10am - 12pm</label>
        <input type="checkbox" class="colour-button" value="10 - 12" id="btn12" /><label for="btn12" class="labe"><i class="fa fa-check-circle hide12"  id="chk-btn12"></i>  5pm - 7pm</label>
      </center>
      </td>
      <td></td>
    </tr>
  </table>
</form>

Select allOpen in new window

This CSS:

label .hide11{
	display: none;
}
label .hide12{
	display: none;
}
label .hide11{
	display: none;
	position: absolute;
	left: 15px;
	top: 0;
	line-height: 56px;
}

Select allOpen in new window

JS:

$(function() {
	  $(".colour-button").click(enable_cb);
	});
	function enable_cb() {
		   if (this.checked) {
		        //this will mean at least one is always checked
		        $("input.colour-button1").prop("disabled", false);
		        $("#chk-" + this.id).show();
		    }
		    else {
		        //in this case, hide the element if you need to, but check for ANY items
		        //$("input.colour-button1").attr("disabled", true);
		        $("#chk-" + this.id).hide();

		        if ($(".colour-button:checked").length == 0) {
		            $("input.colour-button1").attr("disabled", true).prop("checked", false);
		        }
		    }
		}
//CHANGE FROM DISABLE TO ENABLE(BUTTON COLOR)

$(document).ready(function() {
	  $('.colour-button').on('click', function() {
	    if ($(this).is(':checked')) {
	      //clear the other checkboxes
	      $(this).nextAll('.colour-button').prop('checked', false);
	      //alert(this.id);
	      $(this).prevAll('.colour-button').prop('checked', false);
	    }
	  });
	});

//TO ONLY ALLOW ONE TO BE CHOSEN.

Select allOpen in new window

My issue is I want it with the last javascript to "hide" the fa fa-checkbox, I have it done in the first javascript but Im unsure how to do it in the second JS because I will need the checkbox "chck-id" of the previous checkbox not the one I would have just clicked. This is my output now: