Check which input tag has been clicked then highlight it

JavaScript
1

Hi All

Scenario (in jQuery):

A user clicks one button from a list of buttons. Based on which button was clicked, a container appears with some info related to the button clicked. And the button highlights at the same time while the container is showing. But when the user closes the container, the highlight on the selected button should go away.

  1. Now in my project, everything works well but when the container appears, the button I selected doesn’t stay highlight. It only highlights when I hover it with the mouse.

  2. I also want that when I click another button from the list, the current container disappears and another container appears related to that button, and it should stay highlighted until I close it or choose yet another button.

I know it has to do with ‘event.target’ or something similar but I’m stuck.

Here’s the javascript/jquery:


       $("#define-order ul#second-step li input:submit").click(function(evt){
		//Highlights the button that's clicked
		$(this).addClass("selected").blur(function(){
			$(this).removeClass("selected");
		});
		
		//The container slide down and the button stays highlighted
		$("#third-step").slideDown(function(e){
                        //Check which button was clicked then add a css highlighting class
			if($(evt.target)){
				$(evt.target).addClass("selected");
			}
		})
				
	});

Thank you in advance for you help.