I don't know why I get two buttons
===

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!! 

This is my code: 

    <div class="ui-bar ui-grid-c" style="height:30px;width:100%;border-top:solid 2px black;">
		<div class="ui-block-a" style="width:55%;">
			<div class="ui-bar ui-grid-a" style="display:inline;">
				<div class="ui-block-a" style="width:35%;text-align:left;">
                        <label for="mydate" style="margin-top:10px;font-size:10pt;"><b>Compare:</b></label></div>
				<div class="ui-block-b" style="width:65%;text-align:left;margin-top:-10px;"><input name="CompareDate" id="mydate" style="height:35px;" type="date" data-role="datepicker" data-options='{"hideInput": true,"mode": "calbox", "useTodayButton": true}'></div></div></div>
 		<div class="ui-block-b" style="width:20%;text-align:left;margin-left:-5px;">
 				<select name="select-choice" id="select-choice" data-native-menu="false" data-icon="gear" data-iconpos="notext" >
					<option></option>
					<option value="auto">Auto</option>
					<option value="mix">Mix</option>
					<option value="superpose">Superpose</option>
				</select></div>
		<div class="ui-block-c" style="width:12%;text-align:right;margin-left:2px;"> 
               <a href="#" data-role="button" data-iconpos="notext" data-icon="arrow-l">-12 hours</a></div>
		<div class="ui-block-d" style="width:12%;text-align:left;margin-left:3px;">
               <a href="#" data-role="button" data-iconpos="notext" data-icon="arrow-r">+12 hours</a></div>
	</div><!-- Footer -->


Ans this is how it looks like:
![enter image description here][1]


  [1]: http://i.stack.imgur.com/bhgOF.png

As you can see I get one button without icon and another right below with the gear icon.

Anyone has any idea why this is happening?? I'm sure is a stupid thing but I'm not able to see it!!

Thank you very much!!