JSFiddle - React, Tailwind, and code Playground

HTML

<script type='text/javascript'>
    var locations = new Array('A', 'P', 'PR', 'GR', 'MC', 'F', 'S', 'L', 'LU', 'E');
    var anyId = 'anyLocation';
    
    function toggleBoxes( el ) {
        var i;
        if ( el.id == anyId ) {
            for( i = 0; i < locations.length; i++ ){
                var cb = document.getElementById(locations[i]);
                cb.checked = false;
            }
        } else {
            var cb = document.getElementById(anyId);
            cb.checked = false; 
        }
    }    
    </script>
    
    
    <div class="input">
        <p><input onClick='toggleBoxes(this)' id='anyLocation' name="ts-in_pr" value="any" type="checkbox" checked>Any</p>
        <p><input onClick='toggleBoxes(this)' id='A' class="geoloc" name="ts-in_pr[]" value="AR" type="checkbox">Ao</p>
        <p><input onClick='toggleBoxes(this)' id='P' class="geoloc" name="ts-in_pr[]" value="PI" type="checkbox">Pa</p>
        <p><input onClick='toggleBoxes(this)' id='PR' class="geoloc" name="ts-in_pr[]" value="PO" type="checkbox">Po</p>      
        <p><input onClick='toggleBoxes(this)' id='GR' class="geoloc" name="ts-in_pr[]" value="GR" type="checkbox">Gr</p>
        <p><input onClick='toggleBoxes(this)' id='MC' class="geoloc" name="ts-in_pr[]" value="MC" type="checkbox">MC</p>                                                                  
        <p><input onClick='toggleBoxes(this)' id='F' class="geoloc" name="ts-in_pr[]" value="FI" type="checkbox">Fi</p>
        <p><input onClick='toggleBoxes(this)' id='S' class="geoloc" name="ts-in_pr[]" value="SI" type="checkbox">Si</p>
        <p><input onClick='toggleBoxes(this)' id='L' class="geoloc" name="ts-in_pr[]" value="LI" type="checkbox">Li</p>
        <p><input onClick='toggleBoxes(this)' id='LU' class="geoloc" name="ts-in_pr[]" value="LU" type="checkbox">Lu</p>
        <p><input onClick='toggleBoxes(this)' id='E' class="geoloc" name="ts-in_pr[]" value="El" type="checkbox">E</p> 
    </div>