Obtener valor select en distintas filas, Jquery

Estoy haciendo la edición de un pedido, y este va por filas. Tengo 5 columnas en la vista:

1)Producto -> es un select, donde cargo los productos de la BD
2)Opcion -> este es otro select que tiene que ser dependiente del primero
3)Precio -> depende la opción que elijan se tiene que llenar con el precio

Vale muestro lo que tengo en la vista:

@php $contador =1 @endphp
   @foreach ($pedidos as $key => $ped)
     <tr data-fila="{{ $contador }}" id="InputsWrapper">
       <td>
         <select class="form-control selectSTer js-example-basic-single selectProductos idProducto" name="eProducto()" style="min-height: 38px;">
            <option value="" selected>Selecciona un producto </option>
               @foreach ($productos as $pro)
                  <option value="{{ $pro->id}}" {{ ( $pro->id== $ped->idProducto) ? 'selected' : '' }}> {{ $pro->name }} </option>
               @endforeach
          </select>
        </td>
        <td>
        <select class="form-control selectSTer js-example-basic-single" name="eTipo()" style="min-height: 38px;">
          <option value="">Selecciona una opción </option>
              @foreach ($numPedido2 as $item)
                <option value="{{ $item->idCombias}}" {{ ( $item->idCombias== $ped->idCombi) ? 'selected' : '' }}> {{ $item->combination }} </option>
              @endforeach   
         </select>
         </td>
         <td><input type="text" class="form-control selectTercero inputcalculo  ePrecioUnid" name="ePrecioUnid()" value="{{number_format($ped->precio, 2)}}" autocomplete="off"></td>
         <td style="width: 30px;"><input type="text" class="form-control selectTercero inputcalculo cntComprada" name="cntComprada()" value="{{ $ped->cantidad }}" autocomplete="off"></td>
         <td><input type="text" class="form-control selectTercero inputcalculo eSubTotal" name="eSubTotal()" value="{{number_format($ped->subtotal, 2)}}" autocomplete="off"></td>
         <td><a href="#"><i class="far fa-trash-alt iconTask"></i></a></td>
       </tr>
   @php $contador= $contador + 1; @endphp
@endforeach

Luego tengo un botón para añadir fila al pedido:

<div class="pull-right" style="margin-top: 1%;">
    <a href="#" id="add" class="aFila" ><i class="icon-plus"></i> Añadir fila</a>
</div>

Y ahora muestro el Jquery con el que añado filas:

$('#add').click(function(event) {
        $("#tabla").each(function() {
        x++;
        var tds = '<tr data-fila='+x+' id="InputsWrapper">';
        jQuery.each($('tr:last td', this), function(index, element) {
            var html = $(this).html();
            if(index == 0){
                html = '<select class="form-control selectSTer js-example-basic-single selectProductos idProducto" name="eProducto()" style="min-height: 38px;">'+$(this).find('select').html()+'</select>';

                var idProducto = document.getElementsByClassName('idProducto');
                console.log(idProducto);

            }
            if(index == 1){
                html = '<select class="form-control selectSTer js-example-basic-single" name="eTipo()" style="min-height: 38px;"></select>';
            }
            if(index == 2){
                html = '<input type="text" class="form-control selectTercero inputcalculo  ePrecioUnid" name="ePrecioUnid()" value="" autocomplete="off">';
            }
            if(index == 3){
                html = '<input type="text" class="form-control selectTercero inputcalculo cntComprada" name="cntComprada()" value="" autocomplete="off">';
            }
            if(index == 4){
                html = '<input type="text" class="form-control selectTercero inputcalculo eSubTotal" name="eSubTotal()" value="" autocomplete="off">';
            }
            tds += '<td>' + html+ '</td>';
        });
        tds += '</tr>';
        if ($('tbody', this).length > 0) {
            $('tbody', this).append(tds);
        } else {
            $(this).append(tds);
        }
        });
        var envio = $('#elEnvio').val()
            if(envio == 'undefined'){
            envio = 0;
            return envio;
            }
            actualizarTotales(envio);
    });

Intento sacar el valor del select con var idProducto = document.getElementsByClassName('idProducto'); pero no me devuelve nada la consola, supongo que no sabe en que linea está. No se muy bien como puedo hacerlo.