JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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