JSFiddle - React, Tailwind, and code Playground

by Frans Overbeek

HTML

<button id="clearFormNormal">clear form normal</button>
<button id="clearFormSetTimeout">clear form with a setTimeout</button>
<form>
    <label>1</label><input type="text"/>
    <label>2</label><input type="text"/>
    <label>3</label><input type="text"/>
    <label>4</label><input type="text"/>
    <label>5</label><input type="text"/>
</form>

JavaScript

function clearFields (counter) {
    var i = counter || 0, deferred = new $.Deferred();
    if ($("form input").eq(i).length === 1){
        setTimeout(function(){
            $("form input").eq(i).val("");
            i = i + 1;
            clearFields(i).always(function(){
                deferred.resolve();
            });
        },0);
    } else {
        deferred.resolve();
    }
    return deferred.promise();
}

$(document).ready(function(){
    $('#clearFormNormal').click(function(){
        $("form input").val("");
    });
    $('#clearFormSetTimeout').click(function(){
        clearFields();
    });
});