title: Automatically remove the selected option in drop down when the row is cloned
body: <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>function cloneRow() {
    var row = document.getElementById("dropdowns");
    var table = document.getElementById("tableDrop");
    var clone = row.cloneNode(true);
    clone.id = "dropdowns";
    table.appendChild(clone);
    var x = document.getElementById("beansDrop");
    x.remove(x.selectedIndex);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="modal-body"&gt;
    &lt;form method="post" action="adeliveries.php"&gt;
      &lt;table align="center"&gt;
        &lt;tr&gt;
          &lt;td&gt;Supplier:&lt;/td&gt;
          &lt;td id="num"&gt;
            &lt;select name="num"&gt;
              &lt;?php while($row1 = mysqli_fetch_array($result2)):;?&gt;
              &lt;option value="&lt;?php echo $row1[3];?&gt;"&gt;
                &lt;?php echo $row1[1], " - " , $row1[3];?&gt;
              &lt;/option&gt;
              &lt;?php endwhile;?&gt;
            &lt;/select&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;div style="overflow-x:auto;"&gt;
        &lt;table id="tableDrop"&gt;
          &lt;tr&gt;
            &lt;th&gt;
              &lt;h5&gt;COFFEE BEAN&lt;/h5&gt;
            &lt;/th&gt;
            &lt;th&gt;
              &lt;h5&gt;QUANTITY(kg)&lt;/h5&gt;
            &lt;/th&gt;
            &lt;th&gt;
              &lt;h5&gt;REMOVE ORDER&lt;/h5&gt;
            &lt;/th&gt;
          &lt;/tr&gt;
  
          &lt;tr id="dropdowns"&gt;
            &lt;td id="beansDropdown"&gt;
              &lt;select name="beans[]" id="beansDrop"&gt;
                &lt;?php while($row1 = mysqli_fetch_array($result1)):;?&gt;
                &lt;option value="&lt;?php echo $row1[1], " - ";?&gt;"&gt;
                  &lt;?php echo $row1[1];?&gt;
                &lt;/option&gt;
                &lt;?php endwhile;?&gt;
              &lt;/select&gt;
            &lt;/td&gt;
            &lt;td id="quantity"&gt;
              &lt;input type="number" name="quan[]" placeholder="enter quantity" required&gt;
            &lt;/td&gt;
            &lt;td id="remove"&gt;
              &lt;input type="button" value="&amp;#10006;" onclick="RemoveOrder()"&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;table&gt;
        &lt;br&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;input type="button" onclick="cloneRow()" value="Add Order" class="btn btn-secondary" /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="submit" name="abc" value="Send" class="btn btn-primary" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm creating a simple order form where the user would select a coffee bean category from a drop down menu and input the quantity. There is an add order button where it would clone the row if ever the user would wish to order another. Is there anything I could do to hide or remove the selected bean/s automatically when I click Add Order? Because it just simply clones the row.</p>
  
  <p>I have tried looping but I get confused on the logic of it.</p>
  
  <p>Every time I clone the row it would be also deleted on every drop down including the drop down where I selected it from.</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>function cloneRow(){
    var row = document.getElementById("dropdowns");
    var table = document.getElementById("tableDrop");
    var clone = row.cloneNode(true);
    clone.id = "dropdowns";
    table.appendChild(clone);
    var x = document.getElementById("beansDrop");
    x.remove(x.selectedIndex);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;tr id="dropdowns"&gt;                                          
    &lt;td id="beansDropdown"&gt;
      &lt;select name="beans[]" id="beansDrop"&gt;
        &lt;option value="beans1"&gt;beans1&lt;/option&gt;
        &lt;option value="beans2"&gt;beans2&lt;/option&gt;
        &lt;option value="beans3"&gt;beans3&lt;/option&gt;
        &lt;option value="beans4"&gt;beans4&lt;/option&gt;
      &lt;/select&gt;
    &lt;/td&gt;
    &lt;td id="quantity"&gt;
      &lt;input type="number" name="quan[]" placeholder="enter quantity" required&gt;
    &lt;/td&gt;
    &lt;td id="remove"&gt;
      &lt;input type="button" value="&amp;#10006;" onclick="RemoveOrder()"&gt;
    &lt;/td&gt;
  &lt;/tr&gt;</code></pre>
  </div>
  </div>
  </p>