JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <a href="" class="btn" data-product="M1">M1</a>
  <a href="" class="btn" data-product="M2">M2</a>
  <a href="" class="btn" data-product="M3">M3</a>
  <a href="" class="btn" data-product="M4">M4</a>
</body>
</html>

Babel + JSX

const btns = Array.from(document.querySelectorAll('.btn'));

let selectedProduct;

btns.forEach(btn => btn.addEventListener('click', (e) => {
	e.preventDefault();
  selectedProduct = btn.dataset['product'];
  console.log(selectedProduct);
}));