JSFiddle - React, Tailwind, and code Playground

by Camille Bechayda

HTML

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="pure-min.css">
<link rel="stylesheet" href="chosen.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<Br/><Br/>
 

                    <div class="dropdown-container-lsc1" id="div1">
                        <div class="dropdown-button noselect" id="dropdown-button-lsc1">

                            <div class="dropdown-quantity">

                                <span class="quantity" id="quantity-lsc1">Select Steam</span>
                            </div>
                            <i class="fa fa-unsorted"></i>
                        </div>
                        <div class="dropdown-list" id="dropdown-list-lsc1" style="display: none;">
                            <div class="searchbox">
                                
                                &nbsp;
                               <!-- <div class="dropdown-check">
                                    <a class="dropdown-check-all-lsc1 ">
                                        <i class="fa fa-check"></i>
                                        Check All
                                    </a>
                                    &nbsp;
                                    <a class="dropdown-uncheck-all-lsc1 ">
                                        <i class="fa fa-times"></i>
                                        Uncheck All
                                    </a>
                                </div>-->
 ...

CSS

.dropdown-container {
  width: 350px;
  font-family: sans-serif;
  font-size: 14px;
}

.instructions {
  width: 350px;
  font-family: sans-serif;
  font-size: 14px;
}

.instructions {
  width: 100%;
  text-align: center;
}

.dropdown-button {
  background: whitesmoke;
  padding: 10px 12px;
  border: 1px solid lightgray;
  border-image: none;
  width: 100%;
  float: left;
  cursor: pointer;
  box-sizing: border-box;
}

.dropdown-label {
  float: left;
}

.dropdown-quantity {
  float: left;
}

.dropdown-quantity {
  margin-left: 4px;
}

.fa-filter {
  float: right;
}

.fa-unsorted {
  float: right;
}

.dropdown-list {
  border-width: medium 1px 1px;
  border-style: none solid solid;
  border-color: currentColor lightgray lightgray;
  padding: 10px 12px;
  border-image: none;
  width: 100%;
  float: left;
  box-sizing: border-box;
}

input[type='search'] {
  padding: 5px 0px;
}

.dropdown-search {
  width: 200px;
}

.ulBulletin {
  margin: 10px 0px;
  list-style-type: none;
  -ms-overflow-y: auto;
  max-height: 200px;
  -webkit-padding-start: 12px;
}

input[type='checkbox'] {
  top: 2px;
  position: relative;
}

.templatelabel {
  padding-left: 5px;
}

.searchbox {
  background: whitesmoke;
  margin: auto;
  padding: 10px 12px;
  border: 1px solid lightgray;
  border-image: none;
  height: auto;
  box-sizing: border-box;
}

.dropdown-check {
  padding-top: 5px;
}

JavaScript

function displayVals() {
      
            var multipleValues = $('[type="checkbox"].cbxwater:checked').attr('namedesc') || []
            return multipleValues.join(", ");
        }

        $(function () {
            var $divs = $('#divs > div');
            $divs.hide();
            $divs.first().show()
            $('input[type=radio]').on('change', function () {
                $divs.hide();
                $divs.eq($('input[type=radio]').index(this)).show();
            });
        });

        $(document).ready(function () {

  
 


            $('.dropdown-container-lsc1')
                .on('click', '#dropdown-button-lsc1', function () {
                    $('#dropdown-list-lsc1').toggle();
                })
               
                .on('change', '[type="checkbox"]', function () {

                    //var numChecked = $('[type="checkbox"].cbxLCs1:checked').length;
                    //$('#quantity-lsc1').text(numChecked || 'Any');

                    var selSteam = [];
                   //  $('[type="checkbox"].cbxLCs1:checked').each(function () {
                        // alert($(this).attr('namedesc'));
                      //   selSteam.push($(this).attr('namedesc'));
                   //  });

                    $('#quantity-lsc1').text(selSteam.join(", ") || 'Select Steam');

                });
            GetLSCs1();

            function GetLSCs1() {

                // <li> template
                var lscTemplate1 = _.template(
                    '<li class="liLSCs1">' +
                    '<input class="cbxLCs1" name="RadioButton" namedesc="<%= name %>" type="radio">' +
                    '<label class="templatelabel" for="<%= lovid %>"><%= name %></label>' +
                    '<button type="button" name="<%= lovid %>" namedesc="<%= name %>">X</button> ' +
                    '</li>'
                );

                //// $.getJSON(URLLSC, function (data) {
                var data = {
                    "list":...