How to check specific number of checbox from 2 DIVs and disable remaining using Jquery

I have 2 DIV sections and both have checkbox in it. The structure is mentioned below:

<div id="main DIV">

<div id="firstDIV">
<input type="checkbox" checked/>1 
  <input type="checkbox" checked/>2 
  <input type="checkbox" checked/>3<br/>
  <input type="checkbox" checked/>4 
  <input type="checkbox" checked/>5 
</div>

<div id="secondDIV">
<input type="checkbox" checked/>1 
  <input type="checkbox" checked/>2 
  <input type="checkbox" checked/>3<br/>
  <input type="checkbox" checked/>4 
  <input type="checkbox" checked/>5 
</div>

From firstDiv a user can select Maximum number of checkbox but from secondDiv user can select maximum 10 checkbox. But the total number of selected checkbox ( firstDiv + secondDiv) should not be more than 12. As soon as user select 12th checkbox then remaining unchecked checkbox will get disabled from both DIVs.

Note: The main thing is that each time during check/uncheck when counter of Checkboxes that are checked is 11 then all checkbox will be active. Only when counter is equals to 12 then the only unchecked checboxes will get disabled.

My below code is working only for a Single DIV element but how can I implement it on combination of 2 DIVs.

var $checkboxes = $('#firstDiv input[type=checkbox]');
$checkboxes.on('change', function() {
  if ($checkboxes.filter(":checked").length >= 12) {
    $checkboxes.filter(":not(:checked)").prop("disabled", true);
  } else {
    $checkboxes.prop("disabled", false);
  }
});