JSFiddle - React, Tailwind, and code Playground

by VENKATA VINAY BYSANI

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- <div id="products"></div> 
<input type="button" onclick="loadProducts()" value="Load Data"></input>-->


<div class="productrow">
  <div id='productMaster' class="row productDetails">
    <div class="col-sm-3">
      <img src="https://retailer-apps.s3.amazonaws.com/retailer-app/hero/11151_H.jpg" style="width:100px;height:100px" />
    </div>

    <div class="col-sm-3">
      <h4>MRP</h4>
      <p class='mrp'>170</p>
    </div>
    <div class="col-sm-3">
      <h4>TUR</h4>
      <p class='tur'>155.50</p>
    </div>
    <div class="col-sm-3">
      <h4>Margin</h4>
      <p class='margin'>7.589632</p>
    </div>

  </div>

  <br />
  <div class="row offer">
    <div class="col-sm-12 ">
      This product consist of 5.366%
    </div>

  </div>
  <div class="productQuantities">
    <span> <input type="button" value="180ml" onclick="updateDetails(180,380195)"></input> </span>
    <span> <input type="button" value="200ml" onclick="updateDetails(200,380125)"></input> </span>
  </div>
</div>

CSS

.productrow {
  border: 1px;
  border-style: solid;
  border-color: black;
  margin: 10px;
}

.offer {
  border: 1px;

  border-style: solid;
  border-color: black;
  g margin: 10px;
  background-color: gray;
  margin: 10px;
}

.productQuantities {
  margin: 10px;
}

JavaScript

function updateDetails(weight, rscode) {
  alert(weight + "--" + rscode);
  var jsonOject = '{"products":[{"rscode":"380125","brand":"BSSB","itemvarient":"11148","arealist":"U1HAR3040","barcode":null,"branddesc":"SUNSILK SHAMPOO","brandvarientdesc":" SUNSILK BLACK","brandvarientid":"BV_VSSBK","businessdesc":null,"cld":36,"divisioncode":"PP","imageurl":"https://retailer-apps.s3.amazonaws.com/retailer-app/hero/11148_H.jpg","ispromo":"1","itemvarientdesc":"SUNSILK BLACK SHAMPOO MID BOTTLE","moq":1,"mrpunit":85,"parcategory":"ALL","parclass":"ALL","partype":"ALL","paru1u2type":"ALL","plgpricelist":"HAIR","productqtystatus":0,"promodesc":"7% STPR  Sunsilk Clinic Plus & Dove  Mid Shampoo Bottles All India All Channel MOC 08","seqno":4392,"state":"CGH","turunit":77.27,"weightdesc":"ml","weigth":200,"is_cart_product":false,"cart_quantity":0,"new_conv_schemes":[["Get additional 7% off per unit on order above 3 units."]],"offer_discount":"7.0 %","activitycode":40811048,"discount":7},{"rscode":"380195","brand":"BSSB","itemvarient":"11148","arealist":"U1HAR3040","barcode":null,"branddesc":"SUNSILK SHAMPOO","brandvarientdesc":" SUNSILK BLACK","brandvarientid":"BV_VSSBK","businessdesc":null,"cld":36,"divisioncode":"PP","imageurl":"https://retailer-apps.s3.amazonaws.com/retailer-app/hero/11148_H.jpg","ispromo":"1","itemvarientdesc":"SUNSILK BLACK SHAMPOO MID BOTTLE","moq":1,"mrpunit":105,"parcategory":"ALL","parclass":"ALL","partype":"ALL","paru1u2type":"ALL","plgpricelist":"HAIR","productqtystatus":0,"promodesc":"7% STPR  Sunsilk Clinic Plus & Dove  Mid Shampoo Bottles All India All Channel MOC 08","seqno":4392,"state":"CGH","turunit":77.27,"weightdesc":"ml","weigth":180,"is_cart_product":false,"cart_quantity":0,"new_conv_schemes":[["Get additional 7% off per unit on order above 3 units."],["Get additional 7% off per unit on order above 3 units."],["Get additional 7% off per unit on order above 3 units."]],"offer_discount":"7.0 %","activitycode":40811048,"discount":7}]}';


 ...