Previewing text using Jquery

I am creating a system where a user can preview the title and steps of a recipe, i have created a dynamic form so the user can add more steps, the preview works with the title and first step however it seems that i can't get it to work on the second, third, fourth step. Can anyone help me? Any help would be greatly appreciated!


var commentNode = $('#lp-step'),
    nameNode = $('#lp-name');

$('input, textarea').bind('blur keyup', function () {
    commentNode.html($('textarea[name="step_detail[]"]').val().replace(/\n/g, '<br />'));

    nameNode.text('Title: ' + $('input[name="name"]').val());

var addDiv1 = $('#addStep');
var i = $('#addStep p').size() + 1;
$('#addNewStep').on('click', function () {
    $('<p> <textarea  id="step_' + i + '" name="step_detail[]"> </textarea><a href="#" class="remNew1">Remove</a> </p>').appendTo(addDiv1);
    return false;
$(document).on('click', '.remNew1', function () {
    if (i > 2) {
    return false;


<label for="name">Enter recipe name:</label>
            <input type="text" name="name">
            <br />          

            <div id="addStep">

                    <textarea id="step_1" name="step_detail[]"></textarea>
                    <a href="#" id="addNewStep">Add</a>

            <br />
            <button type="submit">
                Save on xml

        <div id="live-preview-display">
            <div id="lp-name"> </div>
            <div id="lp-step"> </div>


You should bind the keyup or blur event to all the new textareas which are created with add button or link whatever.


try this :

$('#addStep').on('keyup', 'textarea', function () {
     step_id = $(this).attr('id');
     step_text = $('#' + step_id).val();

     if($('.'+step_id).length > 0) {

     p = document.createElement('p');
     p.className = step_id;

it worked! I saved it to fiddle too. you should just update the recipe name and clean this as I said i't very hacky just have to improve it.good luck.

Need Your Help

pyHook and wxPython - App Freezes when typing in itself

wxpython deadlock pyhook lockup

I have a small python application that creates a wxPython Frame and then uses pyHook to hook the keyboard. The Frame contains a TextCtrl. When the text in the control is changed, a thread is create...