JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="tags[]"  value="" id="tag_1" />
<span id="1" for="" class="tag selected">siamak 1</span>

<input type="checkbox" name="tags[]" value="" id="tag_2" />
<span id="2" for="" class="tag selected">siamak 12</span>


<input type="checkbox" name="tags[]" value="" id="tag_3" />
<span id="3" for="" class="tag selected">siamak 3</span>

JavaScript

$('span').click(function(){
    var id =  $(this).attr('id');
    var input = $('input#tag_' + id);
    var span = $(this);
    if (input.is(':checked') && span.hasClass('selected')) {
        span.removeClass('selected');
        input.prop('checked', false);
    }
    else {
       span.addClass('selected');
        input.prop('checked', true);
    } 
});