JSFiddle - React, Tailwind, and code Playground

by Lan Jiang

HTML

<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<div></div>

JavaScript

function Produit(nom, prix, qty){
  this.nom = nom;
  this.prix = prix;
  this.qty = qty;
};

var apple = new Produit("apple", 0.30, 0);
var banana = new Produit("banana", 0.03, 0);
var pear = new Produit("pear", 0.35, 0);
var kiwi = new Produit("kiwi", 0.40, 0);

var produit = [apple,banana,pear,kiwi];

for(var i = 0; i < produit.length; i++){
  $('a').eq(i).html(produit[i].nom + '<br/>').attr("id","produit_"+i);
};

$('a').click(function(){
  var id = $(this).attr("id").replace("produit_","");
  produit[id].qty++;
  var div = '';
  for(var i = 0; i<produit.length; i++){
    if(produit[i].qty>0)
      div += produit[i].nom + ' x ' + produit[i].qty + '<br/>'
  }
  $('div').html(div);
});