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

$(document).ready(function() {

    $('.all_perks').click(function() {

        var clicked_perk_id = $(this).data('id');
        var clicked_perk_amount = $(this).data('amount');
        var type = ($(this).hasClass('perks')) ? 'camp' : 'admin';

        var perks = [];
        var perks_id = [];

        var admin_perks = [];
        var admin_perks_id = [];

        $('.perks').each(function() {
            perks.push($(this).data('amount'));
        });
        $('.perks_admin').each(function() {
            admin_perks.push($(this).data('amount'));
        });

        $('.perks').each(function() {
            perks_id.push($(this).data('id'));
        });
        $('.perks_admin').each(function() {
            admin_perks_id.push($(this).data('id'));
        });

        if ($(this).is(':checked')) {
            var checked = 0;
            $('.perks').each(function() {
                current_perk_id = $(this).data('id');
                current_perk_amount = $(this).data('amount');
                if (clicked_perk_amount == current_perk_amount) {
                    $(this).attr('checked', true);
                    if (type == 'admin') checked++;
                }
            });

            $('.perks_admin').each(function() {
                current_perk_id = $(this).data('id');
                current_perk_amount = $(this).data('amount');
                if (clicked_perk_amount == current_perk_amount) {
                    $(this).attr('checked', true);
                    if (type == 'camp') checked++;
                }

            });
            console.log(checked);
            if (checked == 0) {
                var _compare = [];
                var _compare_id = [];

                var selector = (type == 'admin') ? '.perks' : '.perks_admin';

                $(selector).each(function() {
                    current_perk_id = $(this).data('id');
                    current_perk_amount = $(this).data('amount');

                    if...