JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="item">
  <span>Item 1</span>
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
  <button>
  Add to cart
  </button>
</div>
<div class="item">
  <span>Item 2</span>
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
  <button>
  Add to cart
  </button>
</div>
<div class="item">
  <span>Item 3</span>
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
  <button>
  Add to cart
  </button>
</div>
<hr/>
<div class="cart-items">
  <h2>
  Cart Items
  </h2>
</div>

CSS

div {
  margin: 20px;
}

JavaScript

$(document).ready(function() {
	$("button").click(function() {
  	console.log(1);
    var item = $(this).parent().find("span").text();
    var quantity = $(this).parent().find("select").val();
  	$(".cart-items").append("<b>Item:</b> "+item+" <b>quantity:</b> "+quantity+"<br/>");
  });
});