JSFiddle - React, Tailwind, and code Playground

by jmsessink

HTML

<form action="javascript:void(0);">
    <div class="section">
        <input type="text" placeholder="enter text and hit enter" />
        <button>button 1</button>
    </div>
    <div class="section">
        <input type="text" placeholder="enter text and hit enter" />
        <button disabled>button 2</button>
    </div>
    <div class="section">
        <input type="text" placeholder="enter text and hit enter" />
        <button disabled>button 3</button>
    </div>
    <input type="submit" value="submit" />
</form>

JavaScript

var $button = $('button'),
    $form   = $('form'),
    valStr  = '';

$button.click(function (e) {
    e.preventDefault();
    buttonPress($(this).closest('.section'));
});

$(".section").keyup(function (e) {
    if (e.keyCode == 13) $(this).find('button').click($(this));
});

function buttonPress($section) {
    var thisVal = $section.find('input').val();

    if (!$section.find('button').attr('disabled') && thisVal !== '') {
        valStr += (thisVal);
        
        $section
            .html('<p>' + valStr + '</p>')
            .next('.section').length ? $section.next().find('button').removeAttr('disabled') : $form.trigger('submit');
    }
}

$('form').submit(function () {
    alert('submitted');
});