Собрать значение всех входных данных с тем же классом динамически за миллисекунды (setInterval), и обернуть его - Использование Jquery

Question

Я пытаюсь создать форму, как это http://jsfiddle.net/pu3antasyah/5au979ck/. Соберите несколько значений из другой текстовой области и введите их в одну текстовую область.

Кстати, как собрать все входные значения динамически из всех входных с .step class как это >> <input class="step" /> и обернуть его, используя <li />, Отправить <textarea id="collectallfieldtosave texarea" />

$(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>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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>

Answer 1

Вы не должны использовать Live здесь. Используйте и слушайте события в #steparea (прямая трансляция устарела). И в качестве решения вы должны выполнять итерацию, используя $.each() JQuery FN

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

function findSteps(what){
  var acc = '';
  $(what).each(function(){
    acc += '<li>'+$(this).val()+'</li>';
  });
  return acc;
}


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 = findSteps('.step');
    
$('#collectallfieldtosave').val( summary + line + line + IngredientsTitle + line + line + '<ol>' + step + '</ol>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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><br/><br/> </p> 
   
</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>