I want a table (table1) to be displayed n times according the number entered by the user in the input form. Then for each instance of this table the user should be able to click on each row and another relevant table should be displayed.

So far I can produce table1 n times according to user input. But then the function myFunction_disease is only applying to the first iteration of table1. I want each copy of table1 to controlled independently depending on what the user clicks.

Here is jsfiddle: https://jsfiddle.net/k0x4y6d2/1/

     <div  id="num_of_conditions">
                 <div class= "content_text"> Number of conditions:</div>
                  <div >
                    <input type="number" id="numb_conditions" onchange="myFunction_num_conditions();" min="2" max="1">                   </div>
                  </div>
                  <div id=condition_detail>
                  </div>
                  
 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"
      respiratory.style.display= "none"
      infectious.style.display = "table"
        }
  }



  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;
  }
  
#table2 {
  display: none;
}
#table3 {
  display: none;
}
#table4 {
  display: none;
}

CodePudding user response：

That's what you need. For adding more buttons and tables you can just simply add a new table and give a new class table$ (where $ is number, example: table4) and add a new button with data-table-show=$ attribute. That's all