jquery button click not working second time on fieldset?

Question

I have 11 FieldSet using and also have 11 buttons for skipping purpose,

Html

<button id="skip1">1</button>
<button id="skip2">2</button>
<button id="skip3">3</button>

Jquery

$("#skip1").click(function(){
    alert("In1")
        $("#field_1").show();
    });
$("#skip2").click(function(){
    alert("In2")
        $("#field_2").show();
    });

    $("#skip3").click(function(){
    alert("In3")
        $("#field_3").show();
    });

The First time they working fine another time didn't work, only throw the alert Otherwise If possible to skip fieldset? Please give me a suggestion.

Answer 1

Using the :button selector and the fieldsets ids and assuming that the text remains just the numbers (this will also work if it is the id or on a data-attribute or value if the code is changed appropriately), on the onclick of the button the following code will hide all fieldsets and only show the one matching the id of the clicked button. Note that since there are 11 fieldsets and buttons to account for - this will allow all buttons and fieldsets to be controlled from the one piece of code. Note I just dummied up some fieldsets for demo purposes.

 $(document).ready(function(){ $(":button").click(function() { var id=$(this).text(); alert("In"+id); $('fieldset').hide(); $('#field_'+ id).show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="skip1">1</button> <button id="skip2">2</button> <button id="skip3">3</button> <form> <fieldset id="field_1"> <legend>test 1:</legend> Name 1: <input type="text"><br> Email 1: <input type="text"><br> </fieldset> <fieldset id="field_2"> <legend>test 2:</legend> Name 2: <input type="text"><br> Email 2: <input type="text"><br> </fieldset> <fieldset id="field_3"> <legend>test 3:</legend> Name 3: <input type="text"><br> Email 3: <input type="text"><br> </fieldset> </form> 

Answer 2

write your jquery inside document ready

$(document).ready(function() {
    $("#skip1").click(function() {
        alert("In1")
        $("#field_1").show();
    });
    $("#skip2").click(function() {
        alert("In2")
        $("#field_2").show();
    });

    $("#skip3").click(function() {
        alert("In3")
        $("#field_3").show();
    });
})

JS fiddle : https://jsfiddle.net/euftx1a6/

Answer 3

show one fieldset and hide others using hide().Try this:

$("#skip1").click(function(){
       $("#field_1").show();
       $("#field_2").hide();
       $("#field_3").hide();
});
$("#skip2").click(function(){
      $("#field_2").show();
      $("#field_1").hide();
      $("#field_3").hide();
});
$("#skip3").click(function(){
      $("#field_3").show();
      $("#field_1").hide();
      $("#field_2").hide();
});