JSFiddle - React, Tailwind, and code Playground

by Tushar Jadhav

HTML

<form class="Aform">form 1 :
    <li class="total_ligne_01 lignes">
        <div class="ligne_somme_1 lignes_somme">5$</div>
    </li>
    <li class="total_ligne_01b lignes">+
        <div class="ligne_somme_2 lignes_somme">5$</div>
    </li>
    <li class="total_ligne_03 lignes">+
        <div class="ligne_somme_3 lignes_somme">5.5$</div>=</li>
    <li class="total_ligne_04 lignes">
        <div class="ligne_somme_4 lignes_somme"></div>
    </li>
</form>
<hr />
<form class="Aform">form 2 :
    <li class="total_ligne_01 lignes">
        <div class="ligne_somme_1 lignes_somme">10$</div>
    </li>
    <li class="total_ligne_01b lignes">+
        <div class="ligne_somme_2 lignes_somme">10$</div>
    </li>
    <li class="total_ligne_03 lignes">+
        <div class="ligne_somme_3 lignes_somme">10$</div>=</li>
    <li class="total_ligne_04 lignes">
        <div class="ligne_somme_4 lignes_somme"></div>
    </li>
</form>
<hr />
<form class="Aform">form 3 :
    <li class="total_ligne_01 lignes">
        <div class="ligne_somme_1 lignes_somme">20$</div>
    </li>
    <li class="total_ligne_01b lignes">+
        <div class="ligne_somme_2 lignes_somme">20$</div>
    </li>
    <li class="total_ligne_03 lignes">+
        <div class="ligne_somme_3 lignes_somme">20$</div>=</li>
    <li class="total_ligne_04 lignes">
        <div class="ligne_somme_4 lignes_somme"></div>
    </li>
</form>

CSS

*
}

JavaScript

$('form').each(function () {
    var $lines = $(this).find('.lignes_somme'),
        total = 0;
    $lines.filter(':not(:last)').each(function () {
        total += parseFloat(this.textContent);
    });
    $lines.last().html(total);
});