Rails Checkbox redesign sometimes sends wrong ids to controller

A user can select multiple products on my page (called vacancies) and then upgrade them. I use a checkbox:

<input type="checkbox"  class="hidden" name="vacancies[]" id="post_vacancy_ids_<%= vacancy.id %>" value="<%=vacancy.id %>">

<label class="category-choice" for="post_vacancy_ids_<%= vacancy.id %>">
  <%= vacancy.title %>
  <i class="fa fa-check"></i>
</label>

I redesign the checkbox, by hiding it and then giving the label a class ("category-choice").

This works fine but, it is buggy: When I select and deselect the items randomly and then hit upgrade, it sometimes send the right ids to the controller and sometimes the wrong ones. In other words, by clicking the redesigned checkbox, it sometimes works, it sometimes doesnt. Any idea why?

Just in case it matters, I have a javascript that changes the color of the checkbox label when clicked:

$(document).ready(function(){
  $(".category-choice").click(function(){
    $(this).toggleClass("active");
  });
});