JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<form action="#" method="post">
    <label for="i1">Input One</label><input type="text" id="i1" />
    <label for="i2">Input Two</label><input type="text" id="i2" />
    <label for="i3">Input Three</label><input type="text" id="i3" />
    <label for="i4">Input Four</label><input type="text" id="i4" />
    <input type="submit" value="submit" />
</form>

CSS

li {
    border-bottom: 1px solid #ccc;
    line-height: 1.6em;
}
li span {
    float: right;
}

form {
    width: 50%;
    margin: 0 auto 1em auto;
}

form input, form label {
    
    display: inline-block;
}

form input {
    width: 55%;
}

form label {
    width: 40%;
}

JavaScript

var form = document.getElementsByTagName('form')[0];
    
    form.onsubmit = function(){
    
        var labels = document.getElementsByTagName('label');
        
        if (!document.getElementById('container')){
            var container = document.createElement('ol');
            container.id = 'container';
        }
        else {
            var container = document.getElementById('container');
            while (container.firstChild){
                container.removeChild(container.firstChild);
            }
        }
        
        for (var i=0,len=labels.length; i<len; i++){
            if(document.getElementById(labels[i].getAttribute('for'))){
                var newLi = document.createElement('li');
                var iText = document.createElement('span');
                newLi.innerHTML = labels[i].innerHTML;
                iText.innerHTML = document.getElementById(labels[i].getAttribute('for')).value;
                newLi.appendChild(iText);
                container.appendChild(newLi);
            }
        }
        
        document.getElementsByTagName('body')[0].appendChild(container);
        
        return false;
        
    };