JSFiddle - React, Tailwind, and code Playground

HTML

<div id="checkboxlist" >
    <ul class="checkboxlist_list">
        <li>
            <input type="checkbox" name="instrument" id="Keys" value="150" />
        </li>
        <li>
            <input type="checkbox" name="instrument" id="Electric Guitar" value="150" />
        </li>
        <li>
            <input type="checkbox" name="instrument" id="Acoustic Guitar" value="150" />
        </li>
        <li>
            <input type="checkbox" name="instrument" id="Bass" value="150" />
        </li>
        <li>
            <input type="checkbox" name="instrument" id="Drums" value="150" />
        </li>
    </ul>
</div>
Summary:<br>
<div id="summary_musicians"></div>

JavaScript

$('input:checkbox[name=instrument]').change(function() {
    $("#summary_musicians").html(function() {
        var instruments = $("input[name='instrument']:checked").map(function() {
					return $(this).attr('id');
        }).get();
        
        if (instruments.length) {
        	return instruments.join(', ');
        }
        
        return 'Tous';
    });
}).trigger('change');