title: How can I individually address lines in an html table?
body: <p>I have here my small table where I can first choose the gender from a dropdown list. This selection then limits the choices of the second dropdown list. </p>
  
  <p>Now the problem is, if I select for example "Männlich" at the first entry and add a second line over the button, I have there in the second dropdown list the limitation according to the first line where I selected "Männlich".</p>
  
  <p>How can I make the selection for each line individually? Can anyone help me?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#selectOption1').on('change', setAnrede);
  
  function setAnrede() {
    if ($(this).val() === 'Männlich') {
      $('.input-field option[value="Sehr geehrte"]').hide();
      $('.input-field option[value="Liebe"]').hide();
      $('.input-field option[value="Werte"]').hide();
  
      $('.input-field option[value="Sehr geehrter"]').show();
      $('.input-field option[value="Lieber"]').show();
      $('.input-field option[value="Werter"]').show();
  
    }
  
    if ($(this).val() === 'Weiblich') {
      $('.input-field option[value="Sehr geehrter"]').hide();
      $('.input-field option[value="Lieber"]').hide();
      $('.input-field option[value="Werter"]').hide();
  
      $('.input-field option[value="Sehr geehrte"]').show();
      $('.input-field option[value="Liebe"]').show();
      $('.input-field option[value="Werte"]').show();
  
    }
  }
  
  
  function addRow(tableID) {
  
    var table = document.getElementById(tableID);
  
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
  
    var colCount = table.rows[1].cells.length;
  
    for (var i = 0; i &lt; colCount; i++) {
  
      var newcell = row.insertCell(i);
  
      newcell.innerHTML = table.rows[1].cells[i].innerHTML;
      //alert(newcell.childNodes);
      switch (newcell.childNodes[1].type) {
        case "checkbox":
          newcell.childNodes[1].checked = false;
          break;
      }
    }
  }
  
  function deleteRow(tableID) {
    try {
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;
  
      for (var i = 0; i &lt; rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].querySelector('input[name=chk]');
        if (chkbox &amp;&amp; true == chkbox.checked) {
          if (rowCount &lt;= 2) {
            alert("Cannot delete all the rows.");
            break;
          }
          table.deleteRow(i);
          rowCount--;
          i--;
        }
  
  
      }
    } catch (e) {
      alert(e);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form action="#"&gt;
    &lt;input type="button" value="Empfänger hinzufügen" onclick="addRow('myTable')" /&gt;
    &lt;input type="button" value="Empfänger löschen" onclick="deleteRow('myTable')" /&gt;
    &lt;div class="table-wrapper"&gt;
      &lt;div class="table-scroll"&gt;
        &lt;table id="myTable" border=1&gt;
          &lt;tr&gt;
            &lt;th&gt;&lt;/th&gt;
            &lt;th&gt;Geschlecht&lt;/th&gt;
            &lt;th&gt;Anrede&lt;/th&gt;
            &lt;th&gt;Vorname&lt;/th&gt;
            &lt;th&gt;Nachname&lt;/th&gt;
            &lt;th&gt;Titel&lt;/th&gt;
            &lt;th&gt;E-Mail&lt;/th&gt;
            &lt;!--                                    &lt;th&gt;Sendedatum&lt;/th&gt;--&gt;
            &lt;!--                                    &lt;th&gt;Edit&lt;/th&gt;--&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;
              &lt;p&gt;
                &lt;label&gt;
                              &lt;input type="checkbox" name="chk"/&gt;
                              &lt;span&gt;&lt;/span&gt;
                          &lt;/label&gt;
              &lt;/p&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;div class="input-field"&gt;
                &lt;div&gt;
                  &lt;label for="selectOption1"&gt;Geschlecht angeben:&lt;/label&gt;
                  &lt;select class="browser-default" id="selectOption1" required&gt;
                    &lt;option value="Bitte auswählen" selected&gt;Bitte auswählen&lt;/option&gt;
                    &lt;option value="Männlich"&gt;Männlich&lt;/option&gt;
                    &lt;option value="Weiblich"&gt;Weiblich&lt;/option&gt;
                  &lt;/select&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;div class="input-field"&gt;
                &lt;div&gt;
                  &lt;label for="selectOption2"&gt;Anrede angeben:&lt;/label&gt;
                  &lt;select class="browser-default" id="selectOption2" required&gt;
                    &lt;option value="Bitte auswählen" selected&gt;Bitte auswählen&lt;/option&gt;
                    &lt;option value="Sehr geehrter"&gt;Sehr geehrter&lt;/option&gt;
                    &lt;option value="Sehr geehrte"&gt;Sehr geehrte&lt;/option&gt;
                    &lt;option value="Lieber"&gt;Lieber&lt;/option&gt;
                    &lt;option value="Liebe"&gt;Liebe&lt;/option&gt;
                    &lt;option value="Werter"&gt;Werter&lt;/option&gt;
                    &lt;option value="Werte"&gt;Werte&lt;/option&gt;
                    &lt;option value="Hallo"&gt;Hallo&lt;/option&gt;
                  &lt;/select&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;div&gt;
                &lt;input id="vorname" type="text" class="validate"&gt;
              &lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;div&gt;
                &lt;input id="nachname" type="text" class="validate"&gt;
              &lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;div&gt;
                &lt;input id="titel" type="text"&gt;
              &lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;div&gt;
                &lt;input id="vorname" type="text" class="validate"&gt;
              &lt;/div&gt;
            &lt;/td&gt;
            &lt;!--                                    &lt;td&gt;--&gt;
            &lt;!--                                        &lt;input type="text" class="datepicker validate"&gt;--&gt;
            &lt;!--                                    &lt;/td&gt;--&gt;
            &lt;!--                                    &lt;td&gt;--&gt;
            &lt;!--                                        &lt;input type='button' class='AddNew' value='+'&gt;--&gt;
            &lt;!--                                    &lt;/td&gt;--&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>