title: How to build a dynamic table with dependent column values - like on click of country all states should come from array or db
body: <p>I want to build a table with dependent values like - if I click on the country then all states should show with the highlighted country. If states are more which is not fit in the column vertically then add a scroll to state column vertically. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Select&lt;/title&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="application/javascript"&gt;
       $(document).ready(function(){
  
          $('#country1').click(function() {
             $('.hideit').toggle("slide");
           });
       });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;style&gt;
       .container {
       display: table;
       border-collapse:collapse
       }
       .column {
       display:table-row;
       border: 1px solid black;
       }
       .cell {
       display: table-cell;
       border-collapse:collapse
       width: 120px;
       height: 20px;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
       }
    &lt;/style&gt;
    &lt;div class="container"&gt;
       &lt;div class="cell"&gt;
          &lt;div class="column"&gt;&lt;a href="#" id="country1" &gt;country1&lt;/a&gt;&lt;/div&gt;
          &lt;div class="column"&gt;country2&lt;/div&gt;
          &lt;div class="column"&gt;country3&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class="cell hideit"&gt;
          &lt;div class="column"&gt;state1&lt;/div&gt;
          &lt;div class="column"&gt;state2&lt;/div&gt;
          &lt;div class="column"&gt;state3&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class="cell ScrollStyle"&gt;
          &lt;div class="column"&gt;city1&lt;/div&gt;
          &lt;div class="column"&gt;city2&lt;/div&gt;
          &lt;div class="column"&gt;city2&lt;/div&gt;
          &lt;div class="column"&gt;city3&lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>if I click on the country then all states should show with the highlighted country. If states are more which is not fit in the column vertically then add a scroll to state column vertically. </p>