JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<div class="search-tags col-sm-12 pad0">
	<span class="search-tag-btn"><a href="#">Coating Finshes: All</a><span class="close-btn"><a href="#">X</a></span></span>
    <span class="search-tag-btn"><a href="#">Pattern Categories: All</a><span class="close-btn"><a href="#">X</a></span></span>
    <span class="search-tag-btn"><a href="#">Styles: Fine / Small</a><span class="close-btn"><a href="#">X</a></span></span>
    <span class="reset-all"><a href="#">Reset All</a></span>
</div>



<hr>
<hr>
<div id="content">idar</div>
<ul>
		<li><input type="checkbox" onclick="showIPAddress(this.value);" name="lang[]" value="ALLL" class="form-control"><label>All</label><span class="countiy">76</span></li>
		<li><input type="checkbox" onclick="showIPAddress(this.value);" name="lang[]" value="NOTT" class="form-control"><label>Pre-painted Aluminum Coils</label><span class="countiy">76</span></li>
		<li><input type="checkbox" onclick="showIPAddress(this.value);" name="lang[]" value="NUL" class="form-control"><label>Aluminum Panels</label><span class="countiy">76</span></li>
		<li><input type="checkbox" class="form-control"><label>Fiber-Cement Boards</label><span class="countiy">76</span></li>
    </ul>

CSS

.search-tags > span {
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    display: inline-block;
    float: left;
    margin: 0 -1px;
    padding: 5px;
}

.close-btn{
    border:1px solid #d00;
    }

JavaScript

jQuery("input").click(function(){
jQuery(".search-tags").append('<span class="search-tag-btn"><a href="#">Coating Finshes: All</a><span class="close-btn"><a href="#">X</a></span></span>' )
//$("#content").html('jaye');
    
//alert("The paragraph was clicked.");    
});
                 
                 
jQuery(".reset-all").click(function(){
  //  alert("The paragraph was clicked.");
    jQuery(".search-tag-btn").parent().fadeOut('slow');
    });



// Fade out specialty tags when x is clicked
jQuery(document.body).on('click', '.close-btn', function () {
    //var $element = $(this).parent(),
      //  $checkbox = $checkboxes.filter(function(){
        //    return this.value === $element.data('value');
        //}).prop('checked',false).change();    
    jQuery(this).parent().fadeOut('slow');
    jQuery(this).parent().remove();    
});