JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div id="headerWrap">
            <div id="header">
		<div id="headerInner">
                <h1>PayPal button generator</h1>
		</div>
		<div class="clear"></div>
	    </div>
	    
	    
	</div>
	<div id="wrapper">
            <div id="content">
                <div id="inputsArea">
                    <div id="optLbl"><span>Options (<strong class="noOpts">3</strong>) :</span></div>
                    <form>
                        <table id="f">
                            <thead>
                                <tr>
                                    <th class="text">Intitulé</th>
                                    <th class="value">Prix (euros)</th>
                                    <th class="title">Prix (cents)</th>
                                </tr>
                            </thead>
                            <tbody id="genI">
                                <tr>
                                    <td><input class='text'  type='text' name='text1'  value=''></td>
                                    <td class='val'><input class='value'   type='text' name='val1'   value=''></td>
                                    <td><input class='title' type='text' name='title1' value=''></td>
                                </tr>
                                <tr>
                                    <td><input class='text'  type='text' name='text2'  value=''></td>
                                    <td class='val'><input class='value'   type='text' name='val2'   value=''></td>
                                    <td><input class='title' type='text' name='title2' value=''></td>
                                </tr>
                                <tr>
                                    <td><input class='text'  type='text' name='text3'  value=''></td>
                                    <td class='val'><input class='value'   type='text' name='val3'   value=''></td>
                                    <td><input class='title' type='text'...

CSS

/* =Reset
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
html {
	font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
	overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */
	-webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
	-ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}
body {
	background: #fff;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
	display: block;
}
ol, ul {
	list-style: none;
}
table { /* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a {
	text-decoration: none;
}
a:focus {
	outline: thin dotted;
}
a:hover,
a:active { /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */
	outline: 0;
}
a img {
	border: 0;
}

/* Mozilla based browsers */
::-moz-selection {
       background-color: #72b5cb;
       color: #fff;
}
/* Works in Safari */
::selection {
       background-color: #72b5cb;
       color:...

JavaScript

$(document).ready(function(){
    var NO_OF_FIELDS=3;
    
    
    $("#addMore").on("click",function(){
        
        no_of_inputs=$("#genI input").length;
        $(".noOpts").html((no_of_inputs/NO_OF_FIELDS)+1);
        if(!$("#preview").hasClass("old")) {
            $("#preview,#code").addClass("old");
        }
        if(no_of_inputs%NO_OF_FIELDS===0) {
            no_of_opts=no_of_inputs/NO_OF_FIELDS;
            $("#genI").append("<tr>");
            $("#genI tr").eq(no_of_opts).append("<td><input class='text' type='text' name='text"+(no_of_opts+1)+"'></td>", "<td class='val'><input class='value' type='text' name='val"+(no_of_opts+1)+"'></td>","<td><input class='title' type='text' name='title"+(no_of_opts+1)+"'></td>");
        }
        else { // inputs were not added correctly as they are always to be added in triples
            alert("Error");
        }
        
    });//end addMore
    
    $("#less").on("click",function(){
        no_of_inputs=$("#genI input").length;
        
        
        
        if((no_of_inputs/NO_OF_FIELDS)>1) {
            if(!$("#preview").hasClass("old")) {
                $("#preview,#code").addClass("old");
            }
            $("#genI input").eq((no_of_inputs)-1).detach();
            $("#genI input").eq((no_of_inputs-1)-1).detach();
            $("#genI input").eq((no_of_inputs-2)-1).detach();
            $("#genI tr").eq((no_of_inputs/NO_OF_FIELDS)-1).detach();
            $(".noOpts").html((no_of_inputs/NO_OF_FIELDS)-1);
        }
    }); // end less
    
    
    $("#generate").on("click",function(){
        no_of_inputs=$("#genI input").length;
        $(".noOpts").html(no_of_inputs/NO_OF_FIELDS);

        code="\n<form action=\"https://www.paypal.com/cgi-bin/webscr\" method=\"post\" target=\"_top\">";
        code+="\n	<input type=\"hidden\" name=\"cmd\" value=\"_xclick\">";
        code+="\n	<input type=\"hidden\" name=\"business\" value=\""+$("#email-paypal").val()+"\">";
        code+="\n	<input...