JSFiddle - React, Tailwind, and code Playground

by rodrigonery

HTML

<form>
    <fieldset>
        <div>
            <label for="name">name</label>
            <input name="name" id="name">
        </div>
        <div>
            <label for="age">age</label>
            <input name="age" id="age">
        </div>
        <input type="submit">
    </fieldset>
</form>

CSS

form fieldset div {
    margin-bottom: 5px;
}

form fieldset div label {
    display: block;
}
form fieldset div span {
    display: block;
    color: red;
}

JavaScript

$(function() {
    
    // Boa prática de Hoisting e cache.
    var botao = $('form'),
        $this = $(this);
    
    botao.submit(function( e ) {        
        e.preventDefault(); // Hoisting e cache.
        
        $this.find( 'div input' ).each(function() {
            
            var $this = $(this),
                span = $this.parent().find('span');
            
            console.log(span);
            if ( span.length == 0 ) {
                span = $(document.createElement('span'));
                $this.parent().append(span);
            }
            span.html($this.val());     
        });        
    });
});