JSFiddle - React, Tailwind, and code Playground

HTML

<div id="filter-rooms">
       <ul>
           <li>
               <input type="checkbox" value="1" id="rooms" />1 Room</li>
           <li>
               <input type="checkbox" value="2" id="rooms" />2 Rooms</li>
           <li>
               <input type="checkbox" value="3" id="rooms" />3 Rooms</li>
           <li>
               <input type="checkbox" value="4" id="rooms" />4 Rooms</li>
      </ul>
</div>

<div id="filter-bath">
    <ul>
        <li>
            <input type="checkbox" value="1" id="bath" />1 Bathrooms</li>
        <li>
            <input type="checkbox" value="2" id="bath" />2 Bathrooms</li>
        <li>
            <input type="checkbox" value="3" id="bath" />3 Bathrooms</li>
    </ul>
</div>

<div id="filter-yard">
    <ul>
        <li>
            <input type="radio" name="yard" value="yes" id="yard" />Yes</li>
        <li>
            <input type="radio" name="yard" value="no" id="yard" />No</li>
    </ul>
</div>

JavaScript

$('#filter-rooms').on('change', 'input[type="checkbox"]', function () {

    var $ul = $(this).closest('ul'),
        vals = [];

    $ul.find('input:checked').each(function () {

        vals.push($(this).val());

    });

    vals = vals.join(",");

    

});