JSFiddle - React, Tailwind, and code Playground

by Khurram Alvi

HTML

<select class="micro-plan">
    <option value="5">$5.00 monthly</option>
    <option value="10">$10.00 monthly</option>
    <option value="15">$15.00 monthly</option>
    <option value="20">$20.00 monthly</option>
</select>
<a href="cart.php?a=add&pid=5" class="button micro-plan" target="_blank">Order</a>

<select class="mega-plan">
    <option value="25">$25.00 monthly</option>
    <option value="30">$30.00 monthly</option>
    <option value="35">$35.00 monthly</option>
    <option value="40">$40.00 monthly</option>
</select>
<a href="cart.php?a=add&pid=25" class="button mega-plan" target="_blank">Order</a>

<select class="super-plan">
    <option value="45">$45.00 monthly</option>
    <option value="50">$50.00 monthly</option>
    <option value="65">$65.00 monthly</option>
    <option value="70">$70.00 monthly</option>
</select>
<a href="cart.php?a=add&pid=45" class="button super-plan" target="_blank">Order</a>

CSS

.button {
  padding: 12px 8px; 
  text-align:center;
  background: #035ded;
  color: #ffffff;
  font-size: 14px;
  margin-left: 5px
}

JavaScript

$('select').on('change', function() {
  $(this).next('.button').attr('href', 'cart.php?a=add&pid=' + $(this).val());
});