JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="mango" value="mango" /> <label>MANGO</label><br>
<input type="checkbox" id="santol" value="santol" /> <label>SANTOL</label><br>
<input type="checkbox" id="guava" value="guava" /> <label>GUAVA</label><br>
<input type="checkbox" id="lomboy" value="lomboy" /> <label>LOMBOY</label><br>
<input type="checkbox" id="apple" value="apple" /> <label>APPLE</label><br>
<input type="checkbox" id="orange" value="orange" /> <label>ORANGE</label><br>

JavaScript

$("input:checkbox").change(function() {
    var someObj = {};
    someObj.fruitsGranted = [];
    someObj.fruitsDenied = [];

    $("input:checkbox").each(function() {
        if ($(this).is(":checked")) {
            someObj.fruitsGranted.push($(this).attr("id"));
        } else {
            someObj.fruitsDenied.push($(this).attr("id"));
        }
    });

    alert("GRANTED: " + someObj.fruitsGranted);
    alert("DENIED: " + someObj.fruitsDenied);
});