JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<ul id="menu3" class="side_menu expandfirst noaccordion">
    
    <li>
        <div class="refine_att"><a href="#" name="Expand/Collapse">Price</a></div>         
        <ul class="check">
            <li><input id="_1" type="checkbox"><a href="#"> £0.00 - £9.99 </a></li>
            <li><input id="_2" type="checkbox"><a href="#"> £10.00 - £99.99 </a></li>
            <li><input id="_3" type="checkbox"><a href="#"> £100.00 - £249.99 </a></li>
            <li><input id="_4" type="checkbox"><a href="#"> £250.00 - £499.99 </a></li>
            <li><input id="_5" type="checkbox"><a href="#"> £500.00 - £999.99 </a></li>
        </ul>
    </li>
</ul>
<textarea id="t"></textarea>

JavaScript

function updateTextArea() {
    var vals = $('#menu3 input:checkbox:checked').map(
        function(){
            return this.id + ': ' + $(this).val();
        }).get().join(', ');
    $('#t').text(vals);
}

$('input:checkbox').change(
    function(){
        updateTextArea();
    });