JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
    <div id="test1"></div>
    <div id="test2"></div>
</div>
<input id="testInput" />
<span id="output"></span>

CSS

#test div {
    width: 100px;
    height: 100px;
}
#test #test1 {
    background-color: red;
}
#test #test2 {
    background-color: blue;
}

JavaScript

bindFormDrawingClickableZones($("#test"), $("#testInput"));

function bindFormDrawingClickableZones(drawing, inputHidden) {

    var zone = jQuery(drawing).find("div");

    zone.click(inputHidden, function(){toggleZoneSelection(inputHidden, $(this).attr("id"));});

}

function toggleZoneSelection(inputHidden, selectedZoneId) {
    var hiddenInputVal = inputHidden.val().length == 0 ? [] : inputHidden.val();
    var selectedZoneIndex = hiddenInputVal.indexOf(selectedZoneId);
    
    if(selectedZoneIndex == -1){
        hiddenInputVal.push(selectedZoneId);
    } else {
        hiddenInputVal.pop(selectedZoneIndex);
    }
    inputHidden.val(hiddenInputVal);
}