JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<h2>TAG ADD AND REMOVE</h2>

<form action="#" method="GET" id="updateSpecForm">
    <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"  title="Pre-painted Aluminum Coils"><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" title="Aluminum Panels76"><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>
            
            </form>
            
<hr>   
<div id="pre_all">
    <div style="display:block;" id="ALLL" class="finish1 right-search col-sm-8">1st fsdgfsdg</div>
    <div style="display:none;" id="NOTT" class="finish1 right-search col-sm-8">2nd fsdgfsdg</div>
<div style="display:none;" id="NUL" class="finish1 right-search col-sm-8">3rd fsdgfsdg</div>
</div>

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

var maxChecked = 6;

// When specilaty is checked, add tag to profile page
var $checkboxes = $('[type="checkbox"]').change(function() {
    var value = $(this).attr("title");    
    
    if(this.checked ){
        addTag( value )
    }else{
       removeTag( value ); 
    }    
     checkBoxStatus();
    
});

function removeTag(checkBoxValue){
    /* we stored the checkbox value as data attribute,  use that to filter*/
    $('.search-tag-btn').filter(function(){
        return $(this).data('value') === checkBoxValue;
    }).slideUp(function(){
       $(this).remove(); 
    })
}

function addTag( checkBoxValue){
     $newTag = $("<span class='search-tag-btn'>" + checkBoxValue + "<span class='close-btn'>x</span></span>");
    /* store the value in elment data so we can reference back to checkbox */
    $newTag.data('value', checkBoxValue);
    $('.search-tags').append($newTag);
   
}
/* use this to both disable and enable checkboxes */
function checkBoxStatus(){
    var limitReached = $checkboxes.filter(':checked').length == maxChecked;
    $checkboxes.not(':checked').prop('disabled',limitReached);    
}
    


// When Specialties modal closes, uncheck all checked boxes, reset count
$(document.body).on('click', '.close', function () {
    $('.modal-body > #updateSpecForm > .columns').children().removeAttr('checked');
    $('#specCount').html(0);    
})

// Fade out specialty tags when x is clicked
$(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();
    
    $(this).parent().fadeOut('slow');
    $(this).parent().remove();    
}); 



 $('[type="checkbox"]').click(function(){
        
     if(this.checked ){
         var mv = $(this).attr("value"); 
       //  alert( mv );
         var mvactive = "#pre_all #" + mv;
        $( "#pre_all div" ).css("display", "none");
       ...