Displaying a table n times according to user input then having function to show/hide table according to row clicked

Question

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 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>
                  
 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;
}

Answer 1

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😉.

// Creating conditions
const numInput = document.getElementById('num'),
  conditionForm = document.getElementById('condition-form'),
  tablesContainer = document.getElementById('tables'),
  conditionText = tablesContainer.innerHTML;

conditionForm.onsubmit = async function(e) {
  e.preventDefault();
  const numValue = Number(numInput.value);

  await (tablesContainer.innerHTML += conditionText.repeat(numValue));

  addEventListenersToButtons();
}

// Working with table filtering
function addEventListenersToButtons() {
  let buttons = document.querySelectorAll('#tables tr.btn');

  buttons.forEach(function(button, i) {
    button.onclick = function() {
      const tables = button.parentNode.parentNode.parentNode.querySelectorAll('.data-table');

      tables.forEach(table => {
        if (table.classList.contains(`table${button.dataset.tableShow}`)) {
          table.classList.remove('hide')
        } else {
          table.classList.add('hide')
        }
      });

    }
  })
}

addEventListenersToButtons();

.tables-group 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;
}

.tables-group 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;
}

.data-table.hide {
  display: none;
}

<div class="container">
  <form id="condition-form">
    <label for="num">Number of conditions</label>
    <input type="number" name="conditions" id="num" min="0">
    <button type="submit" name="conditions">Submit</button>
  </form>
  <hr>
  <div id="tables">
    <div class="condition">
      <div class="tables-group">
        <table>
          <tr class="btn cardiac" data-table-show="1">
            <td>cardiac</td>
          </tr>
          <tr class="btn respiratory" data-table-show="2">
            <td>respiratory</td>
          </tr>
          <tr class="btn infection" data-table-show="3">
            <td>infection</td>
          </tr>
        </table>
        <table class="data-table table1 hide">
          <tr>
            <td>MI</td>
          </tr>
          <tr>
            <td>valve disease</td>
          </tr>
          <tr 'myFunction_cardiac(this)'>
            <td>CCF</td>
          </tr>
        </table>
        <table class="data-table table2 hide">
          <tr>
            <td>COPD</td>
          </tr>
          <tr>
            <td>asthma</td>
          </tr>
          <tr>
            <td>bronchiectasis</td>
          </tr>
        </table>
        <table class="data-table table3 hide">
          <tr>
            <td>TB</td>
          </tr>
          <tr>
            <td>pneumonia</td>
          </tr>
          <tr>
            <td>cellulitis</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>