JSFiddle - React, Tailwind, and code Playground

by seankoole

HTML

// Kichana Black = 23
// Kichana Sand = 24
// Kwasi = 10

<div class="main-product" data-product-a="10">
  
  <img src="" alt="">
  
  <img src="" alt="">

  <ul>
    <li data-img="..." class="active" data-product-b="23">color Black</li>
    <li data-product-b="24">color Sand</li>
  </ul>

  <button onClick="addToCart(.active[data-product-b], .main-proudct[data-product-a])">
    add to cart
  </button>
  
</div>

JavaScript

function addToCart (productA, productB) {



}



// Kichana Black + Kwasi Amulet
addToCart(23, 12);



// Kichana Sand + Kwasi Amulet
addToCart('Kichana Sand', 'Kwasi Amulet');