title: Buttons repeats in select menu
body: <p>I am trying to do a footer with 5 fields. One of them would be a select button, but I don't know why I get two select buttons!! </p>
  
  <p>This is my code: </p>
  
  <pre><code>&lt;div class="ui-bar ui-grid-c" style="height:30px;width:100%;border-top:solid 2px black;"&gt;
      &lt;div class="ui-block-a" style="width:55%;"&gt;
          &lt;div class="ui-bar ui-grid-a" style="display:inline;"&gt;
              &lt;div class="ui-block-a" style="width:35%;text-align:left;"&gt;
                      &lt;label for="mydate" style="margin-top:10px;font-size:10pt;"&gt;&lt;b&gt;Compare:&lt;/b&gt;&lt;/label&gt;&lt;/div&gt;
              &lt;div class="ui-block-b" style="width:65%;text-align:left;margin-top:-10px;"&gt;&lt;input name="CompareDate" id="mydate" style="height:35px;" type="date" data-role="datepicker" data-options='{"hideInput": true,"mode": "calbox", "useTodayButton": true}'&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class="ui-block-b" style="width:20%;text-align:left;margin-left:-5px;"&gt;
              &lt;select name="select-choice" id="select-choice" data-native-menu="false" data-icon="gear" data-iconpos="notext" &gt;
                  &lt;option&gt;&lt;/option&gt;
                  &lt;option value="auto"&gt;Auto&lt;/option&gt;
                  &lt;option value="mix"&gt;Mix&lt;/option&gt;
                  &lt;option value="superpose"&gt;Superpose&lt;/option&gt;
              &lt;/select&gt;&lt;/div&gt;
      &lt;div class="ui-block-c" style="width:12%;text-align:right;margin-left:2px;"&gt; 
             &lt;a href="#" data-role="button" data-iconpos="notext" data-icon="arrow-l"&gt;-12 hours&lt;/a&gt;&lt;/div&gt;
      &lt;div class="ui-block-d" style="width:12%;text-align:left;margin-left:3px;"&gt;
             &lt;a href="#" data-role="button" data-iconpos="notext" data-icon="arrow-r"&gt;+12 hours&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;!-- Footer --&gt;
  </code></pre>
  
  <p>Ans this is how it looks like:
  <img src="https://i.stack.imgur.com/bhgOF.png" alt="enter image description here"></p>
  
  <p>As you can see I get one button without icon and another right below with the gear icon.Both display same select menu.</p>
  
  <p>Code in: <a href="http://jsfiddle.net/a7pBW/6/" rel="nofollow noreferrer">http://jsfiddle.net/a7pBW/6/</a></p>
  
  <p>Anyone has any idea why this is happening?? I'm sure is a stupid thing but I'm not able to see it!!</p>
  
  <p>Thank you very much!!</p>
  
  <p>UPDATE:</p>
  
  <p>I found out it has something to with the data-native-menu option, but I don't know how to solve it yet. </p>
  
  <p>I think is a JQuery bug because when I run the code with Fire Bug I can see how when you put the select with the icon internally in HTML I can find two references to the button, this is why its repeated. I still don't know how to solve it, I have just worked in positioning both in the same exact position so you can´t see there are two buttons instead of one, but I will keep working as this is not a good way!</p>