JSFiddle - React, Tailwind, and code Playground

HTML

<h6>Donation Information</h6>
<p>
	<a class="button" data-value="500" href="#" style="margin-right:2px;">5" &ndash; $500</a>
	<a class="button" data-value="250" href="#" style="margin-right:2px;">4" &ndash; $250</a>
	<a class="button" data-value="100" href="#"  style="margin-right:2px;">3" &ndash; $100</a>
	<a class="button" data-value="50" href="#" style="padding-right:13px;">2.5" &ndash; $50</a>
</p>
<div id="donationTarget"></div>

CSS

a.button {
	background: #9F3D3D;
	border: 0;
	color: #FFF;
	display: inline-block;
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: 17px;
	font-weight: normal;
	line-height: 23px;
	margin: 0 0 11px;
    text-decoration: none;
	padding: 8px 12px;
	/* css3 */
	-webkit-transition: color 0.25s;
	-moz-transition: color 0.25s;
	-ms-transition: color 0.25s;
	-o-transition: color 0.25s;
	transition: color 0.25s;
}

	a.button:hover {
		color: #DEC9C9;
		color: rgba(255,255,255,0.75);
		cursor: pointer;
	}

	a.button.disabled {
		background: #CCC;
	}

		a.button.clicked:hover, a.button.disabled:hover {
			color: #FFF;
			cursor: default;
		}

JavaScript

$(".button").click(function(e) {
	e.preventDefault();
	if ($(this).hasClass("clicked")) {
		// do nothing
	} else if ($(this).hasClass("disabled")) {
		// do nothing
	} else {
		$(this).addClass("clicked");
		$(".button:not(.clicked)").addClass("disabled");
		var counter = $(".donation").length;
		var amount = $(this).attr("data-value");
		if (amount == 500) {
			var size = 5;
		} else if (amount == 250) {
			var size = 4;
		} else if (amount == 100) {
			var size = 3;
		} else if (amount == 50) {
			var size = 2.5;
		}
		$("#donationTarget").before("<div class=\"donation\"><input maxlength=\"60\" name=\"inscription" + counter + "\" placeholder=\"Inscription (60 character maximum)\" type=\"text\" /><p><strong>Color Preference (subject to availability):</strong></p><div class=\"half\"><input id=\"color-blue" + counter + "\" type=\"radio\" name=\"color" + counter + "\" /><label for=\"color-blue" + counter + "\">Blue</label><div style=\"clear:both;\"></div><input id=\"color-orange" + counter + "\" type=\"radio\" name=\"color" + counter + "\" /><label for=\"color-orange" + counter + "\">Orange</label><div style=\"clear:both;\"></div><input id=\"color-red" + counter + "\" type=\"radio\" name=\"color" + counter + "\" /><label for=\"color-red" + counter + "\">Red</label><div style=\"clear:both;\"></div></div><!--/.half--><div class=\"half\"><input id=\"color-yellow" + counter + "\" type=\"radio\" name=\"color" + counter + "\" /><label for=\"color-yellow" + counter + "\">Yellow</label><div style=\"clear:both;\"></div><input id=\"color-green" + counter + "\" type=\"radio\" name=\"color" + counter + "\" /><label for=\"color-green" + counter + "\">Green</label><div style=\"clear:both;\"></div></div><!--/.half--><div style=\"clear:both;\"></div></div><br /><h6>Additional Donation</h6><p><a class=\"button\" data-value=\"500\" href=\"#\" style=\"margin-right:2px;\">5\" &ndash; $500</a><a class=\"button\" data-value=\"250\" href=\"#\" style=\"margin-right:2px;\">4\" &ndash;...