How to get rid of duplicate code in jquery function that disables a group of checkboxes when two are selected?

I have 2 sets of checkboxes and when 2 checkboxes are selected in each group, rest are disabled. My Jquery works, but there is a lot of duplicate code. How can I combine the two and make it more readable? Is there a way to create a function and have the two sets of checkboxes passed in as arguments when clicked upon? Thanks in advance.

PS - I'm using Bootstrap to style and Values of selected checkboxes will be passed on to PHP.

const CHECKBOXES_SET1 = $(".chkboxes-set1");  const CHECKBOXES_SET2 = $(".chkboxes-set2");    CHECKBOXES_SET1.on("click", function(evt) {    let checkedCount = $(CHECKBOXES_SET1).filter(":checked").length;      if (checkedCount >= 2) {      $(CHECKBOXES_SET1).filter(":not(:checked)").prop("disabled", true);      $(CHECKBOXES_SET1).filter(":not(:checked)").parent().addClass("disabled");    } else {      $(CHECKBOXES_SET1).filter(":not(:checked)").prop("disabled", false);      $(CHECKBOXES_SET1).filter(":not(:checked)").parent().removeClass("disabled");    }  });    CHECKBOXES_SET2.on("click", function(evt) {    let checkedCount = $(CHECKBOXES_SET2).filter(":checked").length;      if (checkedCount >= 2) {      $(CHECKBOXES_SET2).filter(":not(:checked)").prop("disabled", true);      $(CHECKBOXES_SET2).filter(":not(:checked)").parent().addClass("disabled");    } else {      $(CHECKBOXES_SET2).filter(":not(:checked)").prop("disabled", false);      $(CHECKBOXES_SET2).filter(":not(:checked)").parent().removeClass("disabled");    }  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <form action="test.php" method="post">    <div class="form-group mb-2">      <label for="first-btn-group">Pick two numbers</label>      <div class="col" id="first-btn-group">        <label class="btn btn-outline-info">      <input type="checkbox" value="1" name="chkboxes-set1[]" class="chkboxes-set1" data-toggle="button">1    </label>        <label class="btn btn-outline-info">      <input type="checkbox" value="2" name="chkboxes-set1[]" class="chkboxes-set1" data-toggle="button">2    </label>        <label class="btn btn-outline-info">      <input type="checkbox" value="3" name="chkboxes-set1[]" class="chkboxes-set1" data-toggle="button">3    </label>        <label class="btn btn-outline-info">      <input type="checkbox" value="4" name="chkboxes-set1[]" class="chkboxes-set1" data-toggle="button">4    </label>      </div>    </div>    <div class="form-group mb-2">      <label for="second-btn-group">Pick two numbers</label>      <div class="col" id="second-btn-group">        <label class="btn btn-outline-info">      <input type="checkbox" value="5" name="chkboxes-set2[]" class="chkboxes-set2" data-toggle="button">5    </label>        <label class="btn btn-outline-info">      <input type="checkbox" value="6" name="chkboxes-set2[]" class="chkboxes-set2" data-toggle="button">6    </label>        <label class="btn btn-outline-info">      <input type="checkbox" value="7" name="chkboxes-set2[]" class="chkboxes-set2" data-toggle="button">7    </label>        <label class="btn btn-outline-info">       <input type="checkbox" value="8" name="chkboxes-set2[]" class="chkboxes-set2" data-toggle="button">8    </label>      </div>    </div>    <div class="form-group row mb-1 mt-3">      <div class="col-4 text-right">        <button type="submit" class="btn btn-primary" name="nums-reset">Reset</button>      </div>      <div class="col-4">        <button type="submit" class="btn btn-primary" name="nums-submit">Submit</button>      </div>    </div>  </form>

https://stackoverflow.com/questions/65572268/how-to-get-rid-of-duplicate-code-in-jquery-function-that-disables-a-group-of-che January 05, 2021 at 10:05AM