JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<div class="nyp">

<input type="text" name="nyp" placeholder="Enter your amount"/>

<ul>
<li data-price="10">$10.00</li>
<li data-price="25">$25.00</li>
<li data-price="50">$50.00</li>
<li data-price="100">$100.00</li>
<li data-price="custom">Custom</li>
</ul>

</div>

CSS

ul {
  margin: 0 0 1em 0;
  padding: 0;
  list-style: none;
}

li {
  padding: .5em 1em;
  background: green;
  color: white;
  margin: 0 2% 1em 0;
  width: 44%;
  text-align: center;
  cursor: pointer;
  float: left;
  box-sizing: border-box;
}

input{
  width 50%;
  padding: .5em;
  margin-bottom: 1em;
}

JavaScript

$('li').on('click', function() {

  if ('custom' === $(this).data('price')) {
    $('input').val('').trigger('focus');
  } else {
    let value = $(this).data('price')
    $('input').val(value);
  }

});