jQuery click and attr not working

Question

so I'm relatively not very good in jQuery, and some of my code is not working and it is getting me quite stressed, I am attempting to have an item clicked, play a sound (Which I will put in later) and then when the user re-clicks the button have it turn back to its original state. The problem lies when I try to re-click the button with the changed ID (by using this new ID as an identifier) when it doesn't work.

I have created a JSFiddle here http://jsfiddle.net/uGQVh/

Any help is really appreciated.

$(document).ready(function(){

    $('#guitar_string_e_active').click(function() {

        $('#guitar_string_e_active').attr("id","guitar_string_e");
        console.log("log");

    });

    $('#guitar_string_e').click(function guitar_string_e_clicked() {

        $('#guitar_string_e').attr("id","guitar_string_e_active");
    });
});

Answer 1

You'd have better to toggle a class:

jsFiddle

 $('#guitar_string_e').click(function () {
        $(this).toggleClass('active');
        if (!$(this).is('.active')) console.log("not active");
        else console.log("active");
    });

Answer 2

try this

updated fiddle http://jsfiddle.net/uGQVh/1/

$(document).ready(function(){

    $('#guitar_string_e').click(function (){


            $('#guitar_string_e').attr("id","guitar_string_e_active");
  $('#guitar_string_e_active').click(function(){

               $('#guitar_string_e_active').attr("id","guitar_string_e");
               console.log("log");

        });

    });

});

Answer 3

first of all it will be better to switch class instead of switching the Id

Second , try something like that :

$('#guitar_string_e').toggle(function() { $(this).removeClass("guitar_string_e"); $(this).addClass("guitar_string_e_active"); }, function() { $(this).removeClass("guitar_string_e_active"); $(this).addClass("guitar_string_e"); });