JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div id="shop1" class="shop">
<h1>Option 1</h1>
Number of Cans<br>
<input type="number" class="cans1" /><br>
Ml/per can<br>
<input type="number" class="ml1" id="ml1" /><br> 
Cost<br>
<input type="number" class="cost1" id="cst1" /><br> 
</div>
<div id="shop2" class="shop">
<h1>Option 2</h1>
Number of Cans<br>
<input type="number" class="cans2" /><br>
Ml/per can<br>
<input type="number" class="ml2" id="ml2" /><br> 
Cost<br>
<input type="number" class="cost2" id="cst2" /><br> 
</div>
<div id="add-new"></div>

<div class=" buttons ">

<p>
<input type="button" id="add-shop" value="ADD SHOP"/>
 
<input type="submit" id="get" value="CHECK PRICE"> 
</p>
</div>

CSS

.shop{display:block; margin:10px; float:left; padding:20px; border:1px solid #555555; transition: all .5s linear}
 shop:after{float:none;  content: "";
  display: table;
  clear: both;}
  .buttons{padding:10px;display:table; width:100%;left:0 }
  .cheapest{background-color:#8afdad}

JavaScript

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


function getcheap(){

$('.cheapest').removeClass('cheapest');
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); 
     if(typeof cheapest === 'undefined'){
     		 cheapest = totalCst;
         cheapestshop = 1; 
     }else{
     	if(totalCst<cheapest){cheapest = totalCst;
         cheapestshop = shop;}
     }
   })   
   $('#shop'+ cheapestshop).addClass('cheapest')

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