Multiple Spinner elements?

Question

I want to have spinner elements on my shopping cart to select quantity. Like this one: http://jqueryui.com/spinner/

The problem is the spinner layout is applied to a input field with id="spinner", but how can I have multiple input fields, one for each product?

Doing this only the first field will have spinner layout:

<form action="shopping:cart.php" >
quantity 1: <input  id="spinner"><br>
quantity 2: <input  id="spinner"><br>
<input type="submit" value="Submit">
</form>

Answer 1

You cannot have duplicate id attributes as it means the HTML of the page is invalid, and causes problems in JS.

Use a class to group instead:

<form action="shopping:cart.php" >
    quantity 1: <input class="spinner"><br>
    quantity 2: <input class="spinner"><br>
    <input type="submit" value="Submit">
</form>

Then you need to change your jQuery selector to recognise this class:

$('.spinner').spinner();