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/>
 

                    <div class="dropdown-container-lsc1" id="div1">
                       <div class="dropdown-button noselect" id="dropdown-button-lsc1">
                           <!-- <i class="fa fa-unsorted"></i>-->
                              <input type="search" placeholder="Enter Details" class="dropdown-search" id="dropdown-search-lsc1" />
                             
                        </div> 
                        <div class="dropdown-list" id="dropdown-list-lsc1" style="display: none;">
                          <!--  <input type="search" placeholder="&nbsp;Search" class="dropdown-search" id="dropdown-search-lsc1" />-->
                          <!--  &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('input', '#dropdown-search-lsc1', function () {
                    var target = $(this);
                    var search = target.val().toLowerCase();

                    if (!search) {
                        $('.liLSCs1').show();
                        return false;
                    }

                    $('.liLSCs1').each(function () {
                        var text = $(this).text().toLowerCase();
                        var match = text.indexOf(search) > -1;
                        $(this).toggle(match);
                    });
                })
                .on('change', '[type="radio"]', function () {

                    var numChecked = $('[type="radio"].cbxLCs1:checked').length;
                    //$('#quantity-lsc1').text(numChecked || 'Any');
//alert(numChecked)
                    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...