Question

I have a form which has a hidden <div> that shows up when a button is clicked. There are input fields in that hidden <div> that includes buttons

When I first click ‘Add’ the div shows up as it should. I close the div by pressing Cancel and then I reclick ‘Add’ the div shows buttons that have shrunk in size.

check the jsfiddle:
http://jsfiddle.net/uc3Ef/

Answer 1

It’s because you are setting the value attribute of all input elements to nothing and the value attribute is used as the label text for the buttons.

Change this:

$('.hiddenDiv').find('input').each(function(){
    $(this).val("");
});

To:

$('.hiddenDiv').find('input[type="text"]').each(function(){
     $(this).val("");
});

Here is a demo: http://jsfiddle.net/uc3Ef/1/

Also, you do not need to use .each() here, you can just do this:

$('.hiddenDiv').find('input[type="text"]').val("");

This works because .val(STRING) will set the value of all selected elements. Here is the documentation for .val(): http://api.jquery.com/val

Here is a demo: http://jsfiddle.net/uc3Ef/3/