Preview text on only one li having same class

Question

I have a <ul> in which when I type on a input box the text is previewed on the list. I also have a button in which I can add more <li>s to the <ul>. I want to have it so that when I type in a text box the text is previewed on that one <li>.

My code:

<ul class="nav nav-list nav-stacked" id="courseNav">
    <li class="title">
        <a href="#">Overview</a>
    </li>
    <li class="topics" style="margin-top: -12px">
        <a href="#">Topic</a>
    </li>
    <li class="topics">
        <a href="#">Topic</a>
    </li>
    <li class="topics">
        <a href="#">Topic</a>
    </li>
</ul>

My button code:

$('#addCourse').click(function() {
    // adds a li to the courseNav
    $('#courseNav').append('<li class="newTopic" id="newLi"><a href="#">Topic</a></li>');

    $('.newTopic').click(function() {
        $('#courseDiv').css('display', 'none');
        $('#topicDiv').css('display', 'block');
    }); 
});

$('#delCourse').click(function() {
    $('#newLi').remove();
});

My preview code:

var input = $('#editorText'),
    preview = $('.topics a');

    input.keyup(function (e) {
        preview.html(input.val());
        preview.css('padding-top', '10px');
        preview.css('padding-bottom', '10px');
        preview.css('padding-right', '15px');
        preview.css('padding-left', '15px');
        preview.css('word-wrap', 'break-word');
    });

The problem is that the text is previewed on all the <li>s with class "topic". How can I fix this? I can assign ids to the <li>s but then what about the ones added by the button?

New fiddle

Answer 1

Check it out jsFiddle. On click you can save current node, and also keyup binding must be out of click handler

input.keyup(function (e){
   ...    
}

$('.topics').click(function(){
    preview = $(this).find('a');
    ...
}