I'm doing some front end development on a hosted e-commerce platform. The system sends a text input for the customer to choose the quantity of items they want to add to their cart, but I would prefer a select. I don't have access to the markup the system spits out in this regard, so I'd like to use JavaScript to change the text input to a select element.

I used jQuery to remove the select and duplicate the input element with a select with the right choices, but when I try to add something to my cart, only one item is added, regardless of the choice in the select.

Here's the native markup:

<div id=buy-buttons>

  <label>Quantity:</label>

  <input name=txtQuantity type=text value=1 id=txtQuantity class=ProductDetailsQuantityTextBox>

  <input type=submit name=btnAddToCart value=Add To Cart id=btnAddToCart class=ProductDetailsAddToCartButton ThemeButton AddToCartThemeButton ProductDetailsAddToCartThemeButton>

</div>

Here's the jQuery I'm running to update my markup.

 $(#txtQuantity).remove();

 $(#buy-buttons).append('<select id=txtQuantity type=text value=1 class=ProductDetailsQuantityTextBox></select>');

 $(#txtQuantity).append('<option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option>');

Does anyone know why this isn't working? Shouldn't the select be submitting the information to through the form in the same way as the text input?

Thanks!