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){
	this.nom = nom;
    this.prix = prix;
};

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

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

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

a = {};
a.nameArray = [];
a.valueArray = [];
myString = "";

$('a').click(function(){
  var itemClicked = this.innerHTML.replace("<br>","");
  
  //if the nameArray does NOT contain the product, add it, and set value to 1.  If it does contain the product, increment value by 1.
  if(a.nameArray.indexOf(itemClicked)==-1){
    a.nameArray.push(itemClicked);
    a.valueArray.push(1);
  } else {
    a.valueArray[a.nameArray.indexOf(itemClicked)] += 1;
  }
  
  //write the string based on contents of arrays
  myString = "";
  for(var i=0; i<a.nameArray.length;i++){
    myString += a.nameArray[i] + " x " + a.valueArray[i] + "<br/>";
  }
  
  //Rewrite the contents of the html div.
	$('div').html(myString);
});