fill dynamic input with select html

I am trying to make a dynamic form which consists of being able to add rows dynamically and the same with a select I take the values ​​of the select and put them in the inputs of the first row, I would like to know how to fill in the other selects because it only works for me with the first row my select

function cambioOpciones(e) {
  const combo = document.getElementById('opciones'),
    [FECHA, MONEDA, NUMCTA, FAMILIA, CONCEPTO, FACTURA, DENOMINACION_SOCIAL, VENDEDOR] = document.getElementById('opciones').value.split('_');
  document.getElementById('fecha').value = FECHA;
  document.getElementById('moneda').value = MONEDA;
  document.getElementById('numcta').value = NUMCTA;
  document.getElementById('familia').value = FAMILIA;
  document.getElementById('Concepto').value = CONCEPTO;
  document.getElementById('showId').value = FACTURA;
  document.getElementById('denominacion').value = DENOMINACION_SOCIAL;
  document.getElementById('vendedor').value = VENDEDOR;
}

$(document).ready(function() {
  let row_number = 1;
  $("#add_row").click(function(e) {
    e.preventDefault();
    let new_row_number = row_number - 1;
    $('#venta' + row_number).html($('#venta' + new_row_number).html()).find('td:first-child');
    $('#ventas_table').append('<tr id="venta' + (row_number + 1) + '"></tr>');
    row_number++;
  });
  $("#delete_row").click(function(e) {
    e.preventDefault();
    if (row_number > 1) {
      $("#venta" + (row_number - 1)).html('');
      row_number--;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<td>
  <select name="products[]" class="form-control" id="opciones" onchange='cambioOpciones();'>
    @foreach ($ventas1 as $ventas)
    <option value="_______">
      ---
    </option>
    @endforeach
  </select>
</td>

via Chebli Mohamed