JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button" value="ajouter" id="duplik" />
<div id="template">
<select name="produit_cmd[]" class="produit_cmd">
<option value="">Choisissez votre produit</option>
<option value="Colis 6 Kg" data-prix="11.60">Colis 6 Kg - 11,60€ /Kg</option>
<option value="Colis 4 Kg" data-prix="11.90">Colis 4 Kg - 11,90€ /Kg</option>
<option value="Colis 4,5 Kg" data-prix="13.70">Colis 4,5 Kg - 13,70€ /Kg</option>
<option value="Colis été 6 Kg" data-prix="12.30">Colis 6 Kg été - 12,30€ /Kg</option>
<option value="Colis été 4 Kg" data-prix="13">Colis 4 Kg été - 13€ /Kg</option>
</select>
<br/>qté:
<input type="text" name="qte_cmd[]" value="" class="qte_cmd" />
<br/>prix/u
<input type="text" name="prix[]" value="" class="prix_u" readonly="readonly" />
<br/>prix total
<input type="text" name="prix[]" value="" class="prix_tot" readonly="readonly" />
<br/>
</div>
CSS
#template {
display:none;
border: solid 1px silver;
padding: 2 0;
}
JavaScript
var itemNr = 0;
function dupliquer() {
itemNr++;
$newItem = $('#template').clone(true, true);
$newItem.attr('id', 'item_' + itemNr);
$newItem.css('display', 'block');
$newItem.addClass('itemblock')
$('body').append($newItem);
}
$("body").on('change', '.produit_cmd, .qte_cmd', function () {555
calcul($(this))
});
$("#duplik").on('click', dupliquer);
function calcul(item) {
$itemblock=item.parent();
prixu = parseFloat($itemblock.find(':selected').data('prix'), 10);
$itemblock.find(".prix_u:eq(0)").val(prixu);
qte = $itemblock.find('.qte_cmd:eq(0)').val() ? parseInt($itemblock.find('.qte_cmd:eq(0)').val(), 10) : 0;
$itemblock.find(".prix_tot:eq(0)").val(qte * prixu);
}