Edit History

Hello,

So I've been trying to get the quantities to work on product miniatures. It's been a success but it doesn't work how it suppose to work.
Im trying to get the qty to have the same structure as the one in quickview modal and product page.
For some reason only the first product looks how it supposed to.




This is how the code varies between these two (inspect element)

The one working:
 

	<input type="hidden" value="2" name="id_product">
	<div class="qty">
		<div class="input-group bootstrap-touchspin">
			<span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>
			<input type="number" name="qty" id="quantity_wanted" inputmode="numeric" pattern="[0-9]*" value="1" min="1" class="input-group form-control" 			 aria-label="Ilość" style="display: block;">
			<span class="input-group-addon bootstrap-touchspin-postfix" style="display: none;"></span>
			<button class="btn btn-touchspin js-touchspin bootstrap-touchspin-up" type="button">+</button>
			<button class="btn btn-touchspin js-touchspin bootstrap-touchspin-down" type="button">-</button>
		</div>
   </div>
	<button data-button-action="add-to-cart">Buy</button>

The one not working properely: 

<input type="hidden" value="3" name="id_product">
	<div class="qty">
		<input type="number" name="qty" id="quantity_wanted" inputmode="numeric" pattern="[0-9]*" value="1" min="1" class="input-group" aria-label="Ilość">
    </div>
<button data-button-action="add-to-cart">Buy</button>

I added the quantity by modifing the product.tpl in themes/child/templates/catalog/_partials/miniatures/product.tpl and adding these lines of code under  {hook h='displayProductPriceBlock' product=$product type='weight'} 

  {hook h='displayProductPriceBlock' product=$product type='unit_price'}

              {hook h='displayProductPriceBlock' product=$product type='weight'}
/********************************************************************	       
              <form action="{$urls.pages.cart}" method="post">
                <input type="hidden" value="{$product.id_product}" name="id_product">
                <div class="qty">
          <input
            type="number"
            name="qty"
            id="quantity_wanted"
            inputmode="numeric"
            pattern="[0-9]*"
            {if $product.quantity_wanted}
              value="{$product.quantity_wanted}"
              min="{$product.minimal_quantity}"
            {else}
              value="1"
              min="1"
            {/if}
            class="input-group"
            aria-label="{l s='Quantity' d='Shop.Theme.Actions'}"
          >
        </div>
                <button data-button-action="add-to-cart">Buy</button>
              </form>
/********************************************************************	
            </div>
          {/if}
        {/block}

        {block name='product_reviews'}
          {hook h='displayProductListReviews' product=$product}
        {/block}
      </div>

I thought that if I add the qty class before the input the themes js will automaticly append the touchspins. What did I do wrong?

Im using the Classic theme.

It's also the first time I ever post thing type of thing so apologies if I made something unclear