JSFiddle - React, Tailwind, and code Playground

HTML

<div class="user_input_outer" id="num_of_conditions">
                 <div class= "content_text"> Number of conditions:</div>
                  <div class="user_input">
                    <input type="number" id="numb_conditions" onchange="myFunction_num_conditions();" min="2" max="1">                   </div>
                  </div>
                  <div id=condition_detail>
                  </div>

CSS

div.user_input {
      display: table-cell;
      width: 150px;
      font-family: sans-serif;
      font-size: 12;
      line-height: 10px;
  }
  div.user_input > input {
      width: 140px;
      margin: 0px;
      padding: 0px;
      font-family: sans-serif;
      font-size: 14;
      line-height: 19px;
  }
  
  .user_input:focus {
    outline: 0 !important;
}

  .table {
      margin: 25px 0; 
      font-size: 13;
      font-family: sans-serif;
      min-width: 200px;
      margin-left: auto;
      margin-right: auto;
      width: 25%;
         border-style: solid;
      border-width: 1px;
  }
  
    .table td{
      margin: 25px 0; 
      font-size: 13;
      font-family: sans-serif;
      min-width: 200px;
      margin-left: auto;
      margin-right: auto;
      width: 25%;
   border-style: solid;
      border-width: 1px;
  }

JavaScript

function myFunction_num_conditions(x) {
container = document.getElementById('numb_conditions')
   var number = container.value
   for (var i = 0; i < number; i++) {
     count = i+1
        document.getElementById("condition_detail").innerHTML += 'Condition' + (i + 1);
        let newdiv = document.createElement('div');
 newdiv.innerHTML =  "<table id=table1 class=table> <tr onclick='myFunction_disease(this)'><td>cardiac </td></tr> <tr onclick='myFunction_disease(this)'><td> respiratory </td></tr> <tr onclick='myFunction_disease(this)'><td>infection</td></tr></table><table id=table2 class=table> <tr onclick='myFunction_cardiac(this)'><td>MI </td></tr> <tr onclick='myFunction_cardiac(this)'> <td> valve disease </td></tr> <tr 'myFunction_cardiac(this)'><td>CCF</td></tr></table> <table id=table3 class=table> <tr onclick='myFunction_respiratory(this)'><td>COPD </td></tr> <tr onclick='myFunction_respiratory(this)'><td> asthma </td></tr> <tr onclick='myFunction_respiratory(this)'><td>bronchiectasis</td></tr></table><table id=table4 class=table> <tr onclick='myFunction_infectious(this)'><td>TB </td></tr> <tr onclick='myFunction_infectious(this)'><td> pneumonia </td></tr> <tr onclick='myFunction_infectious(this)'><td>cellulitis</td></tr></table>"
 document.getElementById('condition_detail').appendChild(newdiv);
    }
    }

function myFunction_disease(x) {
  const disease = document.querySelector("#table1");
  const cardiac = document.querySelector("#table2");
  const respiratory = document.querySelector("#table3");
  const infectious = document.querySelector("#table4");
    if (x.rowIndex== 0){
      cardiac.style.display= "table"
      respiratory.style.display= "none"
      infectious.style.display = "none"
        }
   else if (x.rowIndex== 1){
      cardiac.style.display= "none"
      respiratory.style.display= "table"
      infectious.style.display = "none"
        }
      else if (x.rowIndex== 2){
      cardiac.style.display= "none"
     ...