JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropdown_box"><span>Colors</span></div>

<div class="dropdown_container">
<ul>
<li><a href="#"><div style="background-color: #000000" class="color" onclick="" title="Black"><div class=CheckMark>&#10003;</div>
<input type="checkbox" name="color[]" value="Black" class="cbx"/></div>Black</a>
</li>
<!-- More list items with checkboxes -->
<li><a href="#"><div style="background-color: #FF0000" class="color" onclick="" title="Red"><div class=CheckMark>&#10003;</div>
<input type="checkbox" name="color[]" value="Red" class="cbx"/></div>Red</a>
</li>
</ul>
</div>

JavaScript

$(document).ready(function() {
    var el = $('.dropdown_box span');
    var text = el.text();
    $('.dropdown_container').on('click', 'li a', function() {
        var colors = [];
        $.each($('.dropdown_container').find(':checked'), function(i, el) {
           colors.push(el.value);
        });
        el.text(text + ' ' + colors.join(', '));
    });
});