JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<form method='post' action="<?php echo $_SERVER['PHP_SELF']; ?>" onsubmit="showData(event)" >
    <div class="_25">
        <p align="center"><strong>Route Name/Number</strong>
        </p>
        <input type="text" name="route" placeholder="Route Number"/>
    </div>
    <div id="div"></div>
    <div class="_25">
        <input type="button" class="button red"value="Add" onclick="generateRow()" />
        <input type="hidden" name="counter" id="counter" />
        <input type="submit" class="button blue" 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;
    document.getElementById('div').appendChild(newdiv);
    document.getElementById('counter').value = counter;
    counter++;
}

//this function is for demonstration only, it will show the submitted data.
function showData(e){
    (e.preventDefault) ? e.preventDefault() : e.returnValue = false;
    var arr = [],
        inp = document.getElementsByTagName('input'),
        sel = document.getElementsByTagName('select');
    
    for (var i = 0; i < inp.length; i++)
    {
        if(inp[i].name != "")
        {
            var name = inp[i].name,
                val  = inp[i].value;
            arr.push([name, val]);
        }
    }
    
    for (var i = 0; i < sel.length; i++)
    {
        var name = sel[i].name,
            val  = sel[i].value;
        arr.push([name, val]);
    }
    
    var data = "";
    for (var a in arr)
    {
        data += arr[a][0] + " -> " + arr[a][1] + "\n";
    }
    alert(data);
}