Question

I want something that functions like this: You click on a name such as Mary Smith and it dynamically generates the data-name value in another ul and li element. I have that part working,
however, I need it to not change all of the li elements to that value. Each time Mary Smith or Tom Jones is clicked it needs to create an li with that value and not change the value of the existing ones.

You can find the fiddle here: http://jsfiddle.net/rsxavior/zHkS8/3/ Basically I need it to function as if the .account-select class could be considered the ‘this’ value for the function. I am not sure of a way to go about doing that.

<ul>
    <li><a href="#" class="account" data-name="John Smith">John Smith</a></li>
    <li><a href="#" class="account" data-name="Mary Jones">Mary Jones</a></li>
</ul>

<ul class="account-hidden-li"></ul>

$('.account').click(function () {
    $('.account-hidden-li').append('<li class="account-select"><a class="close bcn-close" data-dismiss="alert" href="#">&times;</a></li>');
    $('.account-select').text($(this).data("name")).prependto();
});

http://jsfiddle.net/rsxavior/tS9H8/9/

Answer 1

I’m a little confused, I think there might be another error in your code. Using .text(), you are wiping out the <a> element within each li.account-select.

I think this solves your question and also preserves your “close” links:

$('.account').click(function () {
    $('.account-hidden-li').append('<li class="account-select">'+$(this).data("name")+'<a class="close bcn-close" data-dismiss="alert" href="#">&times;</a></li>');
});