JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<form method='post' action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <div class="_25">
        <p align="center"><strong>Route Name/Number</strong></p>
        <input type="text" name="route"/>
    </div>
    <div id="div"></div>
    <div class="_25">
        <input type="button" name="button" class="button red" id="button" value="Add" onclick="generateRow()" />
        <input type="hidden" name="counter" />
        <input type="submit" class="button blue" id="button" value="Register" />
    </div>
</form>
<div class="clear height-fix"></div>

CSS

._25{
    background: #ddd;
    margin: 10px;
    width: 200px;
    padding: 10px;
}
input, select{
    width: 90%;
    margin: 5px auto;
    display: block;
    height: 25px;
}

JavaScript

var counter = 1;

function generateRow() {
    var count = "<p align='center'><font color='red'>" + counter + "</font></p></div>";
    var temp = "<div id='container" + counter + "'  class='_25'><input type='text' name='stop" + counter + "' placeholder='Stop Name'/>"
    + "<input type='text' name='timing" + counter + "' placeholder='Timing'/>"
    + "<select name='ampm" + counter + "'><option>a.m</option><option>p.m</option></select>"
    + "<input type='button' onClick='Javascript:this.parentNode.remove(); counter--;' value='Remove' />";
    var newdiv = document.createElement('div');
    newdiv.innerHTML = temp + count;
    var yourDiv = document.getElementById('div');
    yourDiv.appendChild(newdiv);
    counter++;
    documetn.getElementById('counter').value = counter;
}