fadeOut() only fades out the first element

Question

By default, I have several DIVs hidden and then I fade them in when the user clicks on a certain button. That works fine but when I try to close a .holder DIV using a span within said .holder DIV, only the first one works. When I click the others, nothing happens. I get no error or any sort of visual feedback whatsoever.

The markup:

<div class="holder" id="window_one">
    <div class="title_bar">
        <p>Window 1</p>
        <div class="control_holder">
            <span class="controls" id="close">X</span>
            <span class="controls" id="minimize">_</span>
        </div>
    </div>
    <div class="interface">
        <p>Testing123</p>
    </div>
</div>
<div class="calculator" id="window_two">
    <div class="title_bar">
        <p>Window 2</p>
        <div class="control_holder">
            <span class="controls" id="close">X</span>
            <span class="controls" id="minimize">_</span>
        </div>
    </div>
    <div class="interface">
        <p>Testing123</p>
    </div>
</div>

The jQuery:

$(document).ready(function() {
    $('#close').click(function() {
        $(this).parents('.holder').fadeOut(250);
    });
});

What exactly am I doing wrong here? I'm using jQuery 1.10.2 if that makes any difference.

I'd demo the code on jsFiddle but is seems to be down atm.

Answer 1

You can not have the same id of two element on the page. If you want to do that give it as a class name like -

<div class="holder" id="window_one">
    <div class="title_bar">
        <p>Window 1</p>
        <div class="control_holder">
            <span class="controls close">X</span>
        </div>
    </div>
    <div class="interface">
        <p>Testing123</p>
    </div>
</div>
<div class="calculator" id="window_two">
    <div class="title_bar">
        <p>Window 2</p>
        <div class="control_holder">
            <span class="controls close">X</span>
        </div>
    </div>
    <div class="interface">
        <p>Testing123</p>
    </div>
</div>

and the Jquery like -

$(document).ready(function() {
    $('.close').click(function() {
        $(this).parents('.holder').fadeOut(250);
    });
});

Hope this will help.

Answer 2

Here is how it should be:

<div class="holder" id="window_one">
    <div class="title_bar">
        <p>Window 1</p>
        <div class="control_holder">
            <span class="controls close">X</span>
        </div>
    </div>
    <div class="interface">
        <p>Testing123</p>
    </div>
</div>
<div class="calculator" id="window_two">
    <div class="title_bar">
        <p>Window 2</p>
        <div class="control_holder">
            <span class="controls close">X</span>
        </div>
    </div>
    <div class="interface">
        <p>Testing123</p>
    </div>
</div>

and the JavaScript:

$(document).ready(function() {
    $('.close').click(function(e) {

        $(this).parents('.holder').forEach(function(){

                  $(this).fadeOut(250);

                      });

         e.preventDefault();
    });

});