QTY's + & - only showing on the first product miniature on the page

[pad420]

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

Edited December 5, 2022 by pad420 (see edit history)

[pad420]

I fixed it by changing the form to this

 

<form action="{$urls.pages.cart}" method="post" class="mini-form-add">
                        <input type="hidden" name="token" value="{$static_token}">
                        <input type="hidden" value="{$product.id_product}" name="id_product">
                        {if $product.add_to_cart_url}
                            <div class="add-to-cart-input-group">
                                <div class="qty">
                                    <span class="minus">-</span>
                                    <input type="number" class="count" name="qty" min="1" value="1">
                                    <span class="plus">+</span>
                                </div>

                                <button data-button-action="add-to-cart" class="btn btn-primary btn-mini-add" {if !$product.add_to_cart_url}disabled{/if}>
                                    {l s='Add to cart' d='Shop.Theme.Actions'}
                                </button>

                            </div>
                        {/if}
                    </form>

And then adding custom javascript like so

      $(document).ready(function () {

            $(document).on("click", ".plus", function () {
              var t = $(this).closest(".qty").find(".count");
              t.val(parseInt(t.val()) + 1);
            });
            $(document).on("click", ".minus", function () {
              var t = $(this).closest(".qty").find(".count");
              t.val(parseInt(t.val()) - 1);
              0 == t.val() && t.val(1);
            });
            
      });

 

Edited December 12, 2022 by pad420 (see edit history)