Jquery creating uninteded div around input

I am trying to create a slider using Jquery and store the input in a <input type="text" readonly>. This works when i am just placing the input type in the body of the html page, but when i place it in a popup-window div. It then creates an extra div around the input tag that (I guess?) inherits the css of the popup-window div. And thus having a real bulky border around itself.

I noticed the created div when inspecting the elements in Chrome. Is there anyway to either make so Jquery doesnt create the unecessary div or atleast remove the inherited css from it and make it invisible.

The Html:

<span style='position:absolute; bottom:5px; left:15px;'>
            <a href="#vote" id="vote-button" data-rel="popup" 
                class="ui-btn ui-btn-inline ui-corner-all" 
                data-position-to="window"
                data-transition="fade">
                Vote
            </a>
        </span>
    <div data-role="popup" id="vote" style="width:300px; margin:auto; overflow:none;" class="ui-content">

                <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right"></a>

                    <br>
                    <button href="#main" class="ui-btn ui-btn-inline ui-corner-all" style="position:relative; width:100%; margin:0 auto">Skicka</button>
        <p>
          <label for="amount"></label>
          <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
        </p>
    </div>

The Javascript/jQuery:

    $( "#slider" ).slider({
  value:100,
  min: 0,
  max: 500,
  step: 50,
  slide: function( event, ui ) {
    $( "#amount" ).val( "$" + ui.value );
  }
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );

});

I followed this example for the sliders:
http://ift.tt/1PVjimU
And this example for the popup window: http://ift.tt/1AcN5wA

Cheers