JSFiddle - React, Tailwind, and code Playground

HTML

<button id="reset_form">Reset</button>
<br><br>
Group1:<br>
    
<input name="perks[]" data-id="1" data-amount="5" type="checkbox" class="perks all_perks">$ 5<br>
    
<input name="perks[]" data-id="2" data-amount="5" type="checkbox" class="perks all_perks">$ 5<br>
    
<input name="perks[]" data-id="3" data-amount="10" type="checkbox" class="perks all_perks">$ 10<br>
    
<input name="perks[]" data-id="4" data-amount="17" type="checkbox" class="perks all_perks">$ 17<br>
    
<input name="perks[]" data-id="5" data-amount="25" type="checkbox" class="perks all_perks">$ 25<br>
    
<input name="perks[]" data-id="6" data-amount="49" type="checkbox" class="perks all_perks">$ 49
    
    <br><br>
        
Group 2:<br>
<input name="perks_admin[]" data-id="21" data-amount="10" type="checkbox" class="perks_admin all_perks">$ 10<br>
    
<input name="perks_admin[]" data-id="22" data-amount="15" type="checkbox" class="perks_admin all_perks">$ 15<br>
    
<input name="perks_admin[]" data-id="23" data-amount="15" type="checkbox" class="perks_admin all_perks">$ 15<br>
    
<input name="perks_admin[]" data-id="24" data-amount="25" type="checkbox" class="perks_admin all_perks">$ 25<br>
    
<input name="perks_admin[]" data-id="25" data-amount="50" type="checkbox" class="perks_admin all_perks">$ 50<br>
    
<input name="perks_admin[]" data-id="26" data-amount="100" type="checkbox" class="perks_admin all_perks">$ 100

JavaScript

$(function () { // shorthand for $(document).ready()

  // get all checkboxes
  var allCheckboxes = $(".all_perks:checkbox");
  
  // group them by name for later
  var groups = {};
  allCheckboxes.each(function () {
    groups[this.name] || (groups[this.name] = []);
    groups[this.name].push(this);
  });
  
  // hook up event handling
  allCheckboxes.on("change", function (event) {
    // reset all checkboxes (easier than having to reset)
    allCheckboxes.each(function () { this.checked = false });
    
    // get the clicked checkbox and its amount
    var selected = $(this).prop("checked", true);
    var amount = selected.data("amount");
    
    // process each group of checkboxes
    for(var name in groups) {
      if(!groups.hasOwnProperty(name)) { continue }
      
      var group = $(groups[name]);
      
      // get those checkboxes in the group that have an equal or lower amount
      var matching = group.filter(function () {
        return $(this).data("amount") <= amount;
      });
      
      // get the maximum within that
      var amounts = matching.map(function () {
        return $(this).data("amount");
      }).get();
      
      var maxAmount = Math.max.apply(null, amounts);
      
      // now check those that have that amount
      group.filter("[data-amount='" + maxAmount + "']").prop("checked", true);
    }
  });
});