title: Dynimcally created Select option is duplicating itself when doing selectmenu("refresh") in Jquery Mobile
body: <p>I am creating select option(Drop-down) dynamically using an JSON array. It is creating a select option which also have another select option inside that. </p>
  
  <p>I have created a <strong><em>select</em></strong> in my html and using the same in my JavaScript. Created <strong><em>option</em></strong> and appended to the <strong><em>select</em></strong> </p>
  
  <pre><code>&lt;div  id="state-template" style="display: none"&gt;
  
      &lt;div id="state-container"&gt;
  
          &lt;label class="state-select-label"&gt;&lt;/label&gt;
  
          &lt;select name="state-select" id="state-select"&gt;&lt;/select&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And JavaScript snippet is,</p>
  
  <pre><code>$.each(StatesArray, function (stateIndex, stateItem){
  
      $("#state-select").append($("&lt;option&gt;&lt;/option&gt;").attr("value", stateIndex).text(""+stateItem.StateName));
  
  
  });
  
  $("#state-select").selectmenu().selectmenu("refresh");
  </code></pre>
  
  <p>It is creating a drop-down with a inner drop-down which is a duplicate. And the inner drop-down list the list of states on tap.</p>
  
  <p>Followed many threads in Stackoverflow but didn't got that right.</p>
  
  <p>Below are the rendered element structure image and select option in screen.</p>
  
  <p><a href="https://i.stack.imgur.com/4txQ1.png" rel="nofollow noreferrer">Inspect Element - Select option</a>  <a href="https://i.stack.imgur.com/4txQ1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4txQ1.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/zoY9S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zoY9S.png" alt="enter image description here"></a></p>