title: how do i remove and add value in dynamic created dropdown using JQuery?
body: <p>My requirements are:</p>
  
  <p>1 - If I select any option from drop down then it should not show up in any other drop down except current one.</p>
  
  <p>2 - If I change the above selected option to something else then the previous selected option should show up(added) again in all drop downs &amp; new one should be removed from all other dropdowns.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table class="table table-bordered centeredContent multiSelectFunctionality" id="table"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;button type="button" class="btn btn-plus custom-icon glyphicon glyphicon-plus" onclick="cloneRow();" title="Add Row"&gt;&lt;/button&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;select class="selectedItem form-control" name="selectedItem" id="selectedItem_1"&gt;
            &lt;option value="entityName"&gt;Entity Name&lt;/option&gt;
            &lt;option value="transmitter_mac"&gt;Tag Mac&lt;/option&gt;
            &lt;option value="tag_number"&gt;Tag Number&lt;/option&gt;
            &lt;option value="sub_category"&gt;Sub Category&lt;/option&gt;
            &lt;option value="name"&gt;Department Name&lt;/option&gt;
            &lt;option value="in_time"&gt;In Time&lt;/option&gt;
            &lt;option value="out_time"&gt;Out Time&lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input class="form-control searchItem" placeholder="Enter Search item" name="searchItem" /&gt;
          &lt;!-- &lt;input type="hidden" name="counterValue" id="counterValue" value=""&gt; --&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>function cloneRow() {
    counter++;
    if (counter &gt;= 7) {
      return;
    } else {
      var a = $("table#table").find("tbody");
      var b = a.find("tr:first");
      $trLast1 = a.find("tr:last");
      $trNew = b.clone();
      $trNew.find("button#dltbtn").remove().end();
      $trNew.find("td:first").append('&lt;button type="button" class="btn btn-plus custom-icon glyphicon glyphicon-minus" onclick="deleteRow(this);" title="Remove Row"&gt;&lt;/button&gt;');
      $trLast1.after($trNew);
    }
  }
  
  function deleteRow(a) {
    $(a).closest("tr").remove();
    counter--;
  }
  </code></pre>