Estoy haciendo un carrito con jQuery. Los producto son prendas de ropa por lo cual llevan tallas. En base a lo que quiere el cliente, quieren que por cada talla que tiene el producto salga un input, para poder escoger las distintas cantidades que quiere de cada talla.

Lo que es la maquetación la tengo, pero no se como hacer para que si cojo 5 de la talla M y 6 de la talla XL, me cree dos arreglos por que son dos productos distintos con la cantidad de cada uno.

Yo tenia mi función en jQuery, pero ahora no me vale porque evidentemente no me coge la cantidad ni me genera más de un fila en el arreglo.

**Selector de tallas**

    @foreach ($producto->sacaTallas as $tallas)
       <div class="form-group disInline text-center">
         <label for="cantidad" class="labelTallas">{{ $tallas->nombre }}</label>
            <input type="number" class="form-control tamaInput" id="talla" name="talla[]" min="0" value="0">
       </div>
    @endforeach

**Cuando le doy al botón de añadir al carrito**

    var countCarrito = "";
    var carrito = [];
    var user_id = $("#user_id").val();
    var estado_carrito = false;
    
    $(".card_ver_producto").on('click', '.btn_add_cart',function(e) {
      $('.globo').removeClass('animated swing');
      $('.globo2').removeClass('animated swing');
            
      var data = {};
      countCarrito = countCarrito + 1;
      data.product_id = $(this).data("id");
      data.color = $('input:radio[name=color]:checked').val();
      data.talla = //Aquí obtener la talla
      data.tipoPedido = $('input:radio[name=tipoPedido]:checked').val();
      data.cantidad = document.getElementsByName("cantidad[]").length;
    
      carrito.push(data);
    
      console.log(carrito);
    });

Esto me devuelve:

    0: 
      cantidad: 4
      color: "Blanco"
      product_id: 18
      talla: undefined
      tipoPedido: "Web"
      ...

Pero así me devuelve la cantidad total en el mismo arreglo y no lleno la talla, por eso necesito que por cada talla distinta quedase así el arreglo:

    0: 
      cantidad: 20
      color: "Blanco"
      product_id: 18
      talla: M
      tipoPedido: "Web"
      ...
    1: 
      cantidad: 7
      color: "Blanco"
      product_id: 18
      talla: XL
      tipoPedido: "Web"
      ...


Agradezco la ayuda de antemano.


----------
Pense en hacer un foreach por cada talla, pero eso me generaría un arreglo por cada unidad elegida, y lo necesito por cada talla


----------
Tengo un avance:

Al input de las tallas le he añadido un `data-talla="{{ $tallas->nombre }}"` así se que talla es cada uno de los inputs de cantidad.

    $("input[name='cantidad']").each(function() {
      if($(this).val() >= 1){
        console.log($(this).val());
        console.log($(this).data("talla")); 
    
        countCarrito = countCarrito + 1;
        data.color = $('input:radio[name=color]:checked').val();
        data.talla = $(this).data("talla");
        data.tipoPedido = $('input:radio[name=tipoPedido]:checked').val();
        data.cantidad = $(this).val();
    
        carrito.push(data);
      }
    });

Luego compruebo los que el valor del input es >= a 1 para si uno viene con "0" no contarlo. En los dos console log me saca bien todo, pero al hacer `carrito.push(data)` me añade un arreglo por cada talla que eso está bien, pero me pone la info de cantidad y talla del último input de cantidad.