jQuery: A button that checks all checkboxes in its own DIV and unchecks all the others

I have a dynamically generated form with groups of checkboxes representing categories of companies. These eventually get plotted on a dynamic chart (not shown here). Each group of companies is in a div, and each div has a button called Only that should check all the checkboxes in its own category (div) and uncheck all the other checkboxes on the page.

Here's a Fiddle with all the code: https://jsfiddle.net/c2kn78a9/

The Only buttons have this code in them:

// Uncheck all checkboxes outside this div
$(this).closest("div").not(this).find('input[type=checkbox]').prop('checked', false).change();

// Check all checkboxes in this div
$(this).closest("div").find('input[type=checkbox]').prop('checked', true).change();

But it's not working. Any idea how to fix this?

Here's the code for the entire page.

<!-- This button is different than the other buttons -->
<button class="button-text" id="customize-button">Open User Settings</button>

<!-- Placeholder for dynamic form -->
<div id="company-selection-form"></div>

<script type="text/javascript">

function toMachineString(humanString) {
  var machineString = humanString.replace(/\s+/g, '-').toLowerCase();
  machineString = machineString.replace('&','');
  return machineString;
}

// Setup the form
var categories = new Map([
  ['Tech Giants',['Alphabet','Amazon','Apple','Facebook','Microsoft']], 
  ['Handset Manufacturers',['Apple','Samsung','Motorola','Sony']],
  ['Semiconductors', ['AMD','Intel','Nvidia']]
  //  ... more ...
  ]);

// Build company selection form inputs
let companySelectionHTML = '';

for (let category of categories) {

  categoryName = category[0];
  categoryList = category[1];

  // Setup a div to differentiate each category of companies.
  // Will be used for turning on/off categories en masse
  companySelectionHTML += `<div id="${toMachineString(categoryName)}">\n`;

  // Category heading
  companySelectionHTML += `<h4>${categoryName}</h4>\n`;

  // Only button
  companySelectionHTML += `<button class="only" id="btn-only-${toMachineString(categoryName)}">Only</button>\n`;

  categoryList.forEach(companyName => {

    companySelectionHTML += `
      <label class="checkbox-label">
          <input id="x-${toMachineString(companyName)}" class="checkbox" type="checkbox" name="company" value="${companyName}" checked>
          <label for="x-${toMachineString(companyName)}">${companyName}</label>
      </label>`;
  });

  companySelectionHTML += '</div>\n</div>\n</div>\n';
}

// Append to DOM
const companySelectionId = document.getElementById('company-selection-form');
companySelectionId.insertAdjacentHTML('beforeend', companySelectionHTML);

// Make the ONLY buttons check all the checkboxes in their div and uncheck everything else
$(document).ready(function() {
  $(document).on("click", ".only", function() {

    // Uncheck all checkboxes outside this div
    $(this).closest("div").not(this).find('input[type=checkbox]').prop('checked', false).change();

    // Check all checkboxes in this div
    $(this).closest("div").find('input[type=checkbox]').prop('checked', true).change();

  });
});

</script>

Thanks!