JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<div class="tags">
<input type="checkbox" name="tags0" value="http://test.com" id="create_Tag0_input" />
    <label id="create_Tag0" for="create_Tag0_input" class="tag">Tag</label>
</div>

CSS

.selected {
    font-weight: bold;
}

JavaScript

function selectTag(id) {
    var input = '.tags input#' + id + "_input";
    var label = '.tags label#' + id;
    if ($(input).prop("checked") == true && $(label).hasClass('selected')) {
        $(label).removeClass('selected');
        //The checked is handled by making the span a label
        //$(input).prop('checked', false);
    }
    else {
        $(label).addClass('selected');
        //The checked is handled by making the span a label
        //$(input).prop('checked', true);
    }
}

$(document).ready(function() {
    $("label").each(function() {
        $(this).click(function(e) {
           selectTag($(this).prop("id")); 
        });
    });
});