JSFiddle - React, Tailwind, and code Playground

by Neels Grobler

HTML

<div id="2" data-price="16.04" class="zlava">Špeciálna ponuka! Pôvodná cena: 16.04 eur. Pri nákupe nad
    <div class="vypocetPreZlavu" data-mnozstvo="10" data-cena="12">10 kusov 1 kus za 12 eur.</div>
</div>/ inputs are in a different div, but that should not be a problem
<div id="6" data-price="2.25" class="riadok2">
    <div class="obrazok"></div>
    <div class="nazov1">Chamaecyparis lawsoniana</div>
    <div class="nazov2">ALUMII</div>
    <div class="poznamka"></div>
    <div class="velkost">30/40</div>
    <div class="kontajner">co2L</div>
    <div class="cena">2.25</div>
    <div class="formular">
        <input type="hidden" name="id" value="6" />
        <input type="hidden" class="cena1" name="cena1" id="cena_6" value="2.25" />
        <input type="hidden" class="cena2" name="cena2" id="cena2_6" value="2.36" />
        <input type="hidden" value="6" />
        <input type="text" id="pocet_6" name="pocet" class="pocet1" />
    </div>
</div>

JavaScript

var $pocet = $('input[name="pocet"]');

var recalcTotal = function () {
    var mnozstvo = parseInt($pocet.val());
    var id = parseInt($pocet.attr('id').substring(6));
    var $aktualnyProdukt = $('#' + id);
    var povodnaCena = parseFloat($aktualnyProdukt.data('price'));
    var riadkoveZlavy = $aktualnyProdukt.find('div .vypocetPreZlavu');
    var aktualnaCena = povodnaCena;
    if (riadkoveZlavy.length > 0) {
        riadkoveZlavy.each(function () {
            mnozstvoNaZlavu = parseInt($pocet.data('mnozstvo'));
            cenaPoZlave = parseFloat($pocet.data('cena'));
            
            if (mnozstvo >= mnozstvoNaZlavu) {
                aktualnaCena = cenaPoZlave;
            }
        });
    }
    
    if (isNaN(mnozstvo)) mnozstvo = 0;
    var total = mnozstvo * aktualnaCena;
    console.log(total);
};

$pocet.change(recalcTotal);