after adding DOM manipulation before ajax call, the dom is not retaining after ajax

Question

DEMO LINK

Current Flow ScreenShoot for Ref :

Iam Adding a class to element and trying to give focus. for static elements its working fine. but whenever i call ajax request. the class which i added is not retaining its getting removed.

JS :

$('#search-refine-bar').on('click', function(e) {
    var eventNode = e.target.nodeName;
    $('.highlight').removeClass('highlight').removeAttr('tabindex focus style').css({
        "border": ""
    });
    setTimeout(function() {
        alert(eventNode + " --------------- " + 'In Progress adding focus');
        $(e.target).attr({
            tabindex: "-1",
            focus: "focus"
        }).addClass('highlight').focus().css({
            "border": "1px solid #f00"
        });
        alert(eventNode + " --------------- " + 'Done status')
    }, 1000);

});

Answer 1

After the first click, everything look fine for me.

Your click event is on the div that contains everything, so you are marking also <p> tags etc. Im not sure if you want this...

The probelm is, when you click agian some where, you are delting everything with this code...

$('.highlight').removeClass('highlight').removeAttr('tabindex focus style').css({
    "border": ""
});

And im not sure what you are trying to accomplish with this code..

Im just guessing, are you trying something like this fiddle: http://jsfiddle.net/589hq620/

But for your question, removing this code is the answer...