how to solve hide and visible issue by jquery

Question

I'm trying to make a scenario. At each row, there is two button(One is "Add Me" and another is: "Modify Me") and a text-link("Select"). I want that, By default, "Add Me" button is hidden. if anyone click "Select", "Select" should be changed to "Deselect" and "Modify Me" button should be disappeared and "Add Me" button should be visible. If anyone click on the "Deselect", opposite event should be happened.

I've made the "Select" text to "Deslect". But, "Add Me" button hasn't come. Besides this, changing from "Deselct" to "Select" and visible of "Modify Me" button instead of "Add Me" button is not working.

This is my work: http://jsfiddle.net/learner73/hyNT3/

$(".selected").click(function(){

  $(this).removeClass('selected').addClass('deselected').text('Deselct');
    $(this).next(".addBtn").css("visibility", "visible");
    $(this).next(".modifyBtn").hide();
});

$(".deselected").click(function(){

                    $(this).find('deselected').removeClass('deselected').addClass('selected').text('Select');
    $(this).next(".addBtn").hide();
    $(this).next(".modifyBtn").show();
});

Answer 1

$(".addbtn").hide();
$(document).on('click', '.right', function(e) {
    $(this).text($(this).text() == 'Select' ? 'Deselect' : 'Select');
    $(this).parent().find('.addbtn, .modifyBtn').toggle();
});

Here: http://jsfiddle.net/hyNT3/1/