JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<div id="shop1" class="shop">
<h1>Option 1</h1>
<input type="number" class="cans1" /><br>
<input type="number" class="ml1" id="ml1" /><br> 
<input type="number" class="cost1" id="cst1" /><br> 
</div>
<div id="shop2" class="shop">
<h1>Option 2</h1>
<input type="number" class="cans2" /><br>
<input type="number" class="ml2" id="ml2" /><br> 
<input type="number" class="cost2" id="cst2" /><br> 
</div>
<div id="add-new"></div>

<input type="button" id="add-shop" value="ADD SHOP"/>

<input type="submit" id="get" value="CHECK PRICE"> <br>

CSS

shop

JavaScript

var n= 2; 
$('#add-shop').click(function(){
     n= n+1;
    $('#add-new').append('<div id="shop'+n+'" class="shop"><h1>Option '+n+'</h1><input type="number" class="cans'+n+'" /><br><input type="number" class="ml'+n+'" id="ml1"'+n+' /><br> <input type="text" class="cost'+n+'" id="cst'+n+'" /><br>  </div>');
})    


function getcheap(){
var shop = 0, cheapest ;
   $('.shop').each(function(i,v){
   shop++;
     ml = $('.ml'+shop).val() ;
     cans =  $('.cans'+shop).val() ;
     cost =  $('.cost'+shop).val() ; 
     totalCst =  cost / (ml * cans);
     alert(totalCst);
     if(typeof cheapest === 'undefined'){
     		 cheapest = totalCst;
         cheapestshop = 1;
        alert(cheapest)
     }else{
     	if(totalCst<cheapest){cheapest = totalCst;
         cheapestshop = shop;}
     }
   }) 
   console.log('cheapest is '+cheapest+' at shop '+ cheapestshop) 
   $('#shop'+ cheapestshop).css({'bacground-color':'green'})

}
$("#get").click(function() {
    var shops = document.getElementsByClassName('shop');
    
 getcheap();   
});