Rails 3.2 - How to add a jquery spinner widget within a dialog widget

Question

My jquery spinner widget doesn't seem to work within the jquery dialog ui-dialog-buttonpane class. My goal is to select an item quantity (via form input) from a dialog, and add to a cart.

I've studied the jquery api for both dialog and spinner, but nothing stands out. What is breaking my spinner? Note: class 'entry' and its contents are not included here for brevity.

My HTML:

<div id="storeItemZoom">
    <% @products.each do |product| %>
        <div id="itemBoxZoom" data-id="<%= product.id %>" data-brand="<%= product.brand %>">
            <table>
                <tr>
                    <td><%= image_tag(product.image_url )%></td>
                    <td><span><%= sanitize(product.description) %></span></td>
                </tr>
            </table>
            <div class="price_line">
                <span class="price"><%= number_to_currency(product.price)%></span>
                (<%= product.portion_size%> <%= product.unit_of_measure%>)           
            </div>
            <div class="itemMagnify" data-id="<%= product.id %>">
            </div>
            <div class="btnQty" data-id="<%= product.id %>">
                <label for="spinner">Quantity:</label>
                <input id="spinner" name="value" size="1" value="1" min="1" max="100" data-id="<%= product.id %>"/>
            </div>
        </div>
    <%  end %>
</div>

My Javascript:

$(document).ready(function(){

$('#storeItemZoom').hide();
$('#itemBoxZoom').hide();
$('.btnQty').hide();
$("#spinner[data-id='" + prodvarid + "']").hide();

//Rollover Magnify
$('.entry').mouseover(function(){
    prodvarid = $(this).data('id');
    prodvarbrand = $(this).data('brand');
    //$("#spinner[data-id='" + prodvarid + "']").spinner();

    $("#itemBoxZoom[data-id='" + prodvarid + "']").dialog({
        autoOpen: false,
        show: 400,
        modal: true,
        title:  prodvarbrand,
        minWidth: 800,
        close: function(event, ui){
            $(this).dialog("destroy");
            $('#storeItemZoom').css("display","none");
        },
        buttons: [{
            text: "Add to Cart",
            click: function() {
                $.ajax({
                    type: "POST",
                    url: '/line_items',
                    beforeSend: function(xhr){
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
                    data: {product_id: prodvarid, remote: true},
                    dataType: "script"
                });
                $(this).dialog("destroy");
                $('#storeItemZoom').css("display","none");
            }
        }]
    });
});

$('.itemMagnify').click(function(){
    $("#itemBoxZoom[data-id='" + prodvarid + "']").dialog('open');
    var qty1 = $(".btnQty[data-id='" + prodvarid + "'] input").spinner();
    $(qty1).prependTo($('.ui-dialog-buttonset'));
    $(".btnQty[data-id='" + prodvarid + "'] label").prependTo($('.ui-dialog-buttonset'));
});
/*End Rollover Magnify*/
});

All I get is the form input element - no spinner buttons. What am I overlooking here? Much appreciated.