Как добавить поле Dynami c tex при установке флажка?

Question

Мне нужно динамически создавать текстовое поле, когда я устанавливаю флажок в таблице. В таблице у меня около 500 данных. Каждые данные имеют флажок, и пользователь может искать и выбирать параметры. Как показано на изображении ниже, если пользователь нажимает флажок Тестирование 1 из таблицы, в текстовом поле имени параметра должно присутствовать значение того же теста 1.

Если пользователь выбирает флажок Тестирование 2, необходимо добавить динамическое текстовое поле и должно присутствовать значение Тестирование 2. в созданном текстовом поле. Если пользователь снимет флажок, текстовое поле должно быть удалено из таблицы. Я приложил снимок для справки.

Ниже код для TextField, который находится в таблице.

<div class="tab-content">
  <div id="protocol" class="tab-pane fade in active">
    <div class="span3 border-0" style="overflow: scroll">
      <table id="addParamTable" class="table table-bordered">
        <thead>
          <tr class="info">
            <th>Parameter Name</th>
            <th>Data Type</th>
            <th>Expected Set Value</th>

          </tr>
        </thead>
        <tbody class="parameter_table">
          <tr>
            <td>
              <input type="text" id="parameterName" class="parameterName" name="parameter_name">
            </td>
            <td>
              <input type="text" class="parameterDscription" name="parameter_description">
            </td>
            <td>
              <input type="text" class="expectedValue" name="expected_value">
            </td>
          </tr>
        </tbody>
      </table>

Answer 1

Сделать это можно так:

$("#paramTable input[type='checkbox']").on("click", function() {
  if ($(this).is(":checked")) {
    let name = $(this).parent("td").next("td").text();
    let newname = name.replace(" ", "_");
    let newrow = $("<tr>");
    let newcell = $("<td>");
    let newinput = $("<input type='text' class='parameterName' name='" + newname + "' id='" + newname + "' value='" + name + "'/>");
    newcell.append(newinput);
    newrow.append(newcell);
    let newcells = $("<td><input type='text' class='parameterDscription' name='parameter_description'></td><td><input type='text' class='expectedValue' name='expected_value'></td>")
    newrow.append(newcells);
    $("tbody.parameter_table").append(newrow);
  } else {
    let name = $(this).parent("td").next("td").text();
    let newname = name.replace(" ", "_");
    $("#addParamTable").find("#" + newname).closest("tr").remove();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="paramTable">
<tr>
  <td><input type="checkbox"/></td>
  <td>Testing 1</td>
  <td>1, 4, 6, 5, 9</td>
</tr>
<tr>
  <td><input type="checkbox"/></td>
  <td>Testing 2</td>
  <td>1, 4, 3, 5</td>
</tr>
</table>
<div class="tab-content">
  <div id="protocol" class="tab-pane fade in active">
    <div class="span3 border-0" style="overflow: scroll">
      <table id="addParamTable" class="table table-bordered">
        <thead>
          <tr class="info">
            <th>Parameter Name</th>
            <th>Data Type</th>
            <th>Expected Set Value</th>

          </tr>
        </thead>
        <tbody class="parameter_table">
          <tr>
            <td>
              <input type="text" id="parameterName" class="parameterName" name="parameter_name">
            </td>
            <td>
              <input type="text" class="parameterDscription" name="parameter_description">
            </td>
            <td>
              <input type="text" class="expectedValue" name="expected_value">
            </td>
          </tr>
        </tbody>
      </table>