JSFiddle - React, Tailwind, and code Playground

by Arnaud

HTML

<form class="formulaire form-tab-1">

                  <li class="total_ligne_01 lignes">
                    <div class="ligne_label_1 lignes_label">Cotisations santé : </div>
                    <div class="ligne_somme_1 lignes_somme">5€</div>
                  </li>
                  
                      <li class="total_ligne_01a lignes">
                    <div class="ligne_label_1a lignes_label">dont décès : </div>
                    <div class="ligne_somme_1a lignes_somme">1.50€</div>
                  </li>
                       <li class="total_ligne_01b lignes">
                    <div class="ligne_label_1b lignes_label"><span class="ligne-style-1"> Options :<span>  Pour plus de tranquillité, completez votre formule avec nos garanties : </div>
                  </li>
                  <li class="total_ligne_02 lignes">
                    <div class="ligne_label_2 lignes_label">Indémnités hospitalières : </div>
                    <div class="ligne_checkbox_2 lignes_checkboxes">
                    <div class="fond-checkbox">    <input type="checkbox" value="10" class"radiocheck" title="Choisissez le montant de votre contribution"/> <span>10€</span></div>
                    <div class="fond-checkbox">    <input type="checkbox" value="20" class"radiocheck" title="Choisissez le montant de votre contribution"/> <span>20€</span></div>
                    <div class="fond-checkbox">    <input type="checkbox" value="30" class"radiocheck" title="Choisissez le montant de votre contribution"/> <span>30€</span></div>
                    </div>
                    <div class="ligne_check_ok_2 lignes_ckeck_ok" title="Souscrivez à cette option"> <input type="checkbox" value="" class="selection-option" /> </div>
                    <div class="ligne_somme_2 lignes_somme">5€</div>
                    <div class="ligne_question_2 lignes_question" title="Texte Aide à afficher"> ? </div>
                  </li>
                  
                  <li...

CSS

*
{float:left;
}

JavaScript

$( "form" ).each(function(){  
    
 var ligne_somme_1 = parseFloat($(this).parent().siblings(".ligne_somme_1").text()); 
 var ligne_somme_2 = parseFloat($( ".ligne_somme_2" ).text());
 var ligne_somme_3 = parseFloat($( ".ligne_somme_3" ).text());  
 var total= ligne_somme_1 + ligne_somme_2 + ligne_somme_3 ;
 var afficheTotal = $( ".ligne_somme_4" );
     $( afficheTotal ).text( total );
});


$(this).parent().siblings(".details")