Too many elements appearing at once using Hide()/Show() - JQuery

Question

I have been creating a form where there are up to 15 of the same subform:


    Player: 
    
        
    

// more of the same forms but different ids etc.

To make more forms appear I am using a button:

The JQuery for the button:

$(function () {
  $("#AddPlayer").click(function () {
      for (var i = 0; i < 15; i++) {
          if ($("#PlayerForm" + i).is(":hidden")) {
              $("#PlayerForm" + i).show();
              return;
          }
      }
  });
});

When the button is clicked, two of these forms are shown at once, while I only want one form to be shown every click. Where am I going wrong?
EDIT:
full code:

$(function () {
    $("#AddPlayer").click(function () {
        for (var i = 0; i < 15; i + 1) {
            if ($("#PlayerForm" + i).is(":hidden")) {
                $("#PlayerForm" + i).show();
                return;
            }
        }
    });
    $("#RemovePlayer").click(function () {
        for (var i = 15; i > 0; i - 1) {
            if ($("#PlayerForm" + i).is(":visible")) {
                $("#PlayerForm" + i).hide();
                return;
            }
        }
    });
});

HTML:

Jamiec · Accepted Answer

If you just want one item to be shown, then only select one item. You could do this by finding the first hidden form

$('.form-group').hide()

$("#AddPlayer").click(function () {
      $('.form-group:hidden:first').show();
  });



    Player: 
    
        
    


    Player: 
    
        
    


    Player: 
    
        
    


    Player:

You can see here ive used your class .form-group as there is no need to target by id.

Too many elements appearing at once using Hide()/Show() - JQuery

Answers (1)

Related Questions