JSFiddle - React, Tailwind, and code Playground

by Shah Danial

HTML

<textarea name="summary" rows="7" class="summary"></textarea>
<br/><br/> 
<input id="yield" value="1 person">
<br/><br/> 
    <div id="steparea">
<p><input class="step" value="step 1"><a href="#" class="remove">remove</a></p> 
<br/><br/>    
    </div>
<a href="#" id="addinput">add more step</a>
<br/><br/>
<br/><br/>    
    <textarea id="collectallfieldtosave" name="nameoffield" rows="15" cols="70" placeholder=".." class="usp-textarea"></textarea>

JavaScript

$(function(){
    
var scntDiv = $('#steparea');
        var i = $('#steparea p').size() + 1;
        
        $('#addinput').live('click', function() {
                $('<p><input class="step-'+ i +'" value="step '+ i +'"><a href="#" class="remove">remove</a></p><br/><br/>').appendTo(scntDiv);
                i++;
                return false;
        });
        
        $('.remove').live('click', function() { 
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });    
    
});



window.setInterval(function(){
var 
space = ' ',
line = '\n', 
summary = $('.summary').val(),
theyield = $('#yield').val(),
IngredientsTitle = '<b>Ingredients for (<span class="yield">' +space+ theyield +'</span>)</b>',
step = '<li>' + $('.step').val() + '</li>';
    
$('#collectallfieldtosave').val( summary + line + line + IngredientsTitle + line + line + '<ol>' + step + '</ol>');
});