jQuery element stored with `click` event not working as required

Question

One of my APP dev requires

I clone a link 3 times and stored in to an object. after i stored to object i have added some click event to stored object's link element.

I have a navigation link, when user click on the navi number, i am appending the stored element to container.

All it works. the issue is:

the click event of the link only works on page load. it's not working after shuffling the other stored object to container.

how to fix this. the event all are goes away. click event not working further.

here is my js:

var listLength = $('li').length;
var origional = $('.content');
var catcheEl = {};

    for(i=1;i<= listLength;i++){
        catcheEl['content'+i] = origional.clone();
        var link = $(catcheEl['content'+i]).find('a').addClass('link'+i);
        addEvent(link);
    }

function addEvent (link) {
    var x = 0;
    link.click(function(e){
        e.preventDefault();
        x++;
        console.log(x);
        $(this).addClass('p'+x); //only adds on page load.
    });
}

$('li').click(function(){
    var num = $(this).find('button').prop('class');
    $('#newContainer').html(catcheEl['content'+num]); //not working once other elements loaded.
});

$('.content').hide();

Live Demo

What i require is :

1. I should shuffle the link element clicking the navi button

2. the class name of element should continue

3. the added event should be continue.

Thanks in Advance.

Answer 1

EDIT NEW ANSWER
I don't like it so much since it relies on the class value(you should do some some security check, but...basically I have edited the way you define x , so I have retrieved all the classes of a, the splitted them, checked the lenght of the array.
Then if it is 1 (only link class) or 0 (don't know, just in case) or is not an array then set 0 otherwise retrieve the last array element and remove all the non numeric digit(hopefully, don't know about null byte or similar funny guys).

var listLength = $('li').length,
    origional = $('.content'),
    catcheEl = {};

function addEvent(link) {
    //Define the x variable
    var v=link.attr('class').split(/\s+/),
        l=v.length,
        x= (v.constructor === Array && (l==1 || l===0))? 0:parseInt(v[l-1].replace(/\D/g,''));

    link.click(function (e) {
        e.preventDefault();
        x++;
        $(this).addClass('p' + x);
    });
}

for (i = 1; i <= listLength; i++) {
    catcheEl['content' + i] = origional.clone();
    var link = $(catcheEl['content' + i]).find('a').addClass('link' + i);
    addEvent(link);
}

$('li').click(function () {
    var num = $(this).find('button').prop('class');
    $('#newContainer').html(catcheEl['content' + num]);
    addEvent($(catcheEl['content' + num]).find('a')); //Re-bind the event
});

$('.content').hide();

FIDDLE