JSFiddle - React, Tailwind, and code Playground

by SeasonEnds

HTML

<div class="tabcontent addsupplier">
            
            <div class="left-box"><h1>Add a supplier</h1>
            
                <div id="expand2-no"></div>
                
                <div id="expand2">
                    <div class="list_filter_supplier_side">
                        <div class="filterpadding">
                            <input class="filter-supplier-side" type="text" value="" />
                        </div>    
                        
                        <ul class="checklist-supplier cl2">
                            <li id="supplier75"><label for="75"><input id="75" name="mysupplier" type="checkbox" class="checkbox"/>3M Store Demo</label></li>
                            <li id="supplier472"><label for="472"><input id="472" name="mysupplier" type="checkbox" class="checkbox"/>Decimal Quan_LC</label></li>
                            <li id="supplier5"><label for="5"><input id="5" name="mysupplier" type="checkbox" class="checkbox"/>MSC Industrial</label></li>
                        </ul>
                    </div><!--end of list_filter-->                    
                </div>
                
                <a href="javascript:animatedcollapse.toggle('expand2')"  data-openimage="images/toggle_collapse.png" data-closedimage="images/toggle_expand.png">
                <img src="images/toggle_collapse.png" border="0" /></a>
            </div><!--end of left-box (Refine Search)-->    
            <input type="button" value="Add to My Suppliers" class="grey-button-side" id="addtomysuppliers" />            
            
            </div><!--end of supplier-->


<div class="portlethere">
    
    Waiting
</div>

CSS

/*---- Styling the portlet -----*/    
.maximize {
    position:relative;
    top:3px;
}

.drag {
    float:left;
    text-align:left;
    width:100%;
    min-width:250px;
    border:1px solid #d7d7d7;
    margin:0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
}

.drag .selectallcheckbox {
    color: #137DA9;
    margin-left:0px;
    clear:both;
    font-weight:bold;
}

.drag li{
    min-height:20px;
    margin:2px 0 2px 5px;
}

.drag ul.left{
    float:left;
    width: 49%;
}

.drag ul.right{
    float:right;
    width: 49%;
}

#remove-button {
    width:79%;
    float:left;
    text-align:right;
    clear:both;
    margin-bottom: 10px;
}

#remove-button-cart {
    width:40%;
    float:right;
    text-align:right;
    margin-bottom: 10px;
}
    
.portlet-contet {
    font-size:10px;
}
        
.column { 
    width: 40%; 
    float: left; 
    min-width:300px;
}
.portlet { 
    margin: 0 1em 1em 0;
}
.portlet .ui-icon {
    cursor:pointer; 
    margin:2px;
}
.portlet-header {
    padding: 2px;
    height:2em;
    cursor:move;
}
.portlet-header .ui-icon {
    float: right;
}
.portlet-header input {
    cursor:pointer;
}
    
.portlet-content { 
    padding: 0.4em; 
    font-size:0.7em;
}
.ui-sortable-placeholder { 
    border: 1px dotted black; 
    visibility: visible !important; 
    height: 50px !important; 
}
.ui-sortable-placeholder * {
    visibility: hidden;
}
    
.expand {
    text-decoration:none;
    display:inline;
    margin-left:4px;
    width:16px;
    height:16px;
    text-align: center;
}    

.expand a {
    color:white;
    font-weight:bold;
    background:#137DA9;
}

.expand a.hover {
    color:red;
    font-weight:bold;
    background:red;
}

.expand-content {
    margin-left:10px;
}

JavaScript

$(document).ready(function() {

        //make stuff happen when you click the button            
        $("#addtomysuppliers").click(function() {
            var selected = new Array();
            
            //Loop through inputs for selected checkboxes and do some function
            $('input:checkbox[name=mysupplier]:checked').each(function() {

                //find checkbox id and assign to variable
                supplierid = $(this).attr('id');    
                
                //hide its parent li until server updates list of suppliers and page is refreshed
                $(this).parents('ul.checklist-supplier').find('li#supplier' +supplierid).hide('slow', function() {
    
                //unchecking the hidden checkbox - may not be needed - don't want to cause errors when looking for checked boxes                  
                $('input#'+supplierid).attr('checked', false);
                    
                });
            });

//getting response back from server and setting it as variable json            
var json = [
    {
        "@checkbox": "Y",
        "@order": "2",
        "@status": "1",
        "category": {
            "@id": "191",
            "label": "ABC",
            "subcategories": {
                "subcategory": {
                    "@checkbox": "Y",
                    "@id": "19",
                    "label": "SUB_ABC",
                    "suppliers": [
                        {
                            "@custIconInfoExists": "yes",
                            "@duns": "333333333",
                            "@hubInfo": "yes",
                            "@id": "154",
                            "@info": "yes",
                            "@nonEditable": "no",
                            "@prefSupInfo": "yes",
                            "@select": "no",
                            "@supstatus": "yes",
                            "label": "MSC Industrial",
                            "info": "Supplier Notes...