JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<!-- <body>
<select id='purpose'>
<option value="0">Personal use</option>
<option value="1">Business use</option>
<option value="2">Passing on to a client</option>
</select>
<div style='display:none;' id='business'>Business Name<br/>&nbsp;
<br/>&nbsp;
    <input type='text' class='text' name='business' value size='20' />
    <br/>
</div>
</body> -->
<select id="sectins-select">
  <option value="4">4</option>
  <option value="3">3</option>
  <option value="2">2</option>
  <option value="1">1</option>
</select>
<div class="all-drops">
  <div class="drop-cont">
    <div class="drop-title">
      <select>
        <option>New Arrivals</option>
        <option>Inspiration</option>
        <option selected="">Must See</option>
        <option>Men</option>
        <option>Women</option>
        <option>Exclusive</option>
        <option>Gift Ideas</option>
        <option>Kids</option>
        <option>Lifestyle</option>
        <option>Shoes</option>
        <option>Accesories</option>
      </select>
    </div>
    <div id="droppable-1" class="droppable ui-sortable ui-droppable">
    </div>
  </div>
  <div class="drop-cont">
    <div class="drop-title">
      <select>
        <option selected="">New Arrivals</option>
        <option>Inspiration</option>
        <option>Must See</option>
        <option>Men</option>
        <option>Women</option>
        <option>Exclusive</option>
        <option>Gift Ideas</option>
        <option>Kids</option>
        <option>Lifestyle</option>
        <option>Shoes</option>
        <option>Accesories</option>
      </select>
    </div>
    <div id="droppable-2" class="droppable ui-sortable ui-droppable">
    </div>
  </div>
  <div class="drop-cont">
    <div class="drop-title">
      <select>
        <option>New Arrivals</option>
        <option>Inspiration</option>
        <option>Must See</option>
        <option>Men</option>
        <option>Women</option>
        <option>Exclusive</option>
        <option selected="">Gift...

CSS

.all-drops {
    display: flex;
    height: 100%;
    overflow: auto;
    margin-bottom: -51px;
}
.drop-cont {
    width: 25%;
    height: 100%;
}
.droppable {
    border: 1px solid #a9a9a9;
    width: calc(100% - 20px);
    height: calc(100% - 95px);
    padding: 0px;
    margin: 10px;
    overflow: auto;
}

JavaScript

$(document).ready(function(){
    $('#sectins-select').on('change', function() {
      if ( this.value == '1')
      {
        $(".drop-cont:nth-child(1) ").show();
        $(".drop-cont:nth-child(2) ").hide();
        $(".drop-cont:nth-child(3) ").hide();
        $(".drop-cont:nth-child(4) ").hide();
      }
       else if ( this.value == '2')
      {
        $(".drop-cont:nth-child(1) ").show();
        $(".drop-cont:nth-child(2) ").show();
        $(".drop-cont:nth-child(3) ").hide();
        $(".drop-cont:nth-child(4) ").hide();
      }
      else if ( this.value == '3')
      {
        $(".drop-cont:nth-child(1) ").show();
        $(".drop-cont:nth-child(2) ").show();
        $(".drop-cont:nth-child(3) ").show();
        $(".drop-cont:nth-child(4) ").hide();
      }
      else if ( this.value == '4')
      {
        $(".drop-cont:nth-child(1) ").show();
        $(".drop-cont:nth-child(2) ").show();
        $(".drop-cont:nth-child(3) ").show();
        $(".drop-cont:nth-child(4) ").show();
      }
    });
});