JSFiddle - React, Tailwind, and code Playground

by BioSs

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="tab-abonnement span12">
                    <div class="titre-abo">ABONNEMENT</div>   
                    <div class="sous-titre-abo"><div class="titre-abo">Débit internet</div>
                    <div id="detail-debit" class="detail-abonnement"></div>
                    <ul class="thumbnails" id="debit-list"><li class="M L XL carte">
		       <a id="opt_2" href="javascript:void(0)" class="thumbnail">
			<label>
			<img src="/modules/abonnement/img/options/100-megas.png"> 
			<br>100 Mbs<br>11.705 €/mois<br><input type="radio" name="2" value="2" data-id="2" data-prix="11.705" data-libelle="100 Mbs" data-type="location" data-section="abo-debit">
			 </label>
			</a>

			</li><li class="O512 " style="display: none;">
		       <a id="opt_41" href="javascript:void(0)" class="thumbnail">
			<label>
			<img src="/modules/abonnement/img/options/512k.png"> 
			<br>512 kbps<br>0.000 €/mois<br><input type="checkbox" name="41" value="41" data-id="41" data-prix="0.000" data-libelle="512 kbps" data-type="location" data-section="abo-debit">
			 </label>
			</a>

			</li></ul></div>
	<div class="sous-titre-abo"><div class="titre-abo">Téléphonie</div> 
        <div class="sous-sous-titre-abo"><div class="titre-abo">Fixe</div>
        <div id="detail-tel-fixe" class="detail-abonnement"><ul></ul></div>
        <ul class="thumbnails" id="tel-fixe-list"><li class="L">
		       <a id="opt_1" href="javascript:void(0)" class="thumbnail">
			<label>
			<img src="/modules/abonnement/img/options/fixes-50-destinations.png"> 
			<br>Téléphonie illimitée<br>4.181 €/mois<br><input type="number" placeholder="quantité" name="1" max="6" min="0" value="0" data-id="1" data-prix="4.181" data-libelle="Téléphonie illimitée" data-type="location" data-section="abo-tel-fixe">
			 </label>
			</a>

			</li><li class="M" style="display: none;">
		       <a id="opt_20"...

JavaScript

(function($) {

    function include(arr, obj) {
	for (var i = 0; i < arr.length; i++)
	    if (arr[i][0] === obj)
		return true;
    }

    function getId(arr, obj) {
	for (var i = 0; i < arr.length; i++)
	    if (arr[i][0] === obj)
		return i;
    }

    function editObjet(arr, id_objet, nouveau_libelle, nouveau_prix, quantite, type) {
	arr[id_objet][1] = nouveau_libelle;
	arr[id_objet][2] = nouveau_prix;
	arr[id_objet][3] = quantite;
	arr[id_objet][4] = type;
	return arr;
    }

    function removeObjet(arraa, id_objet) {
	arraa.splice(id_objet, 1);
	return arraa;
    }

    $(document).ready(function() {
	var Arrays = new Array();
	$('a.thumbnail input').click(function() {
	    var id = $(this).data('id');
	    var prix = $(this).data('prix');
	    var libelle = $(this).data('libelle');
	    var type = $(this).data('type');
	    var section = $(this).data('section');
	    var nouveau_prix, quantite, nouveau_type_prix;

	    if (type === 'achat')
		nouveau_type_prix = '€';
	    else if (type === 'location')
		nouveau_type_prix = '€/mois';

	    if ($(this).attr('type') === 'number')
	    {
		quantite = $(this).attr('value');
		nouveau_prix = quantite * prix;
		nouveau_libelle = quantite + 'x ' + libelle;
	    } else if ($(this).attr('type') === 'checkbox')
	    {
		nouveau_prix = prix;
		nouveau_libelle = libelle;
		if ($(this).attr('checked'))
		    quantite = 1;
		else
		    quantite = 0;
	    }
	    else
	    {
		nouveau_prix = prix;
		nouveau_libelle = libelle;
		quantite = 1;
	    }

	    if (include(Arrays, id))
	    {
		id_objet = getId(Arrays, id);

		if (quantite === 0)
		    Arrays = removeObjet(Arrays, id_objet);
		else
		    Arrays = editObjet(Arrays, id_objet, nouveau_libelle, nouveau_prix, quantite, type);
	    }
	    else
	    {
		if (quantite > 0)
		{
		    var objet = new Array(id, nouveau_libelle, prix, quantite, type);
		    Arrays.push(objet);
		}
	    }

	    ligne = new Array();
	    var n = 0;

	    jQuery.each(Arrays, function(i, val)...