Q:

jQuery - how to get dynamic width of element according to class

I have this basic animation which includes two divs.  One div has a class of single the other div has a class of double.  Each have a height of 39px. 
.single elements have a width of 100px, and .double elements have a width of 200px, however, I start out with the .single div at 50px, and .double at 100px, and then, using jQuery, I (wish) to animate each div to the width according to it's class.  It's a bit hard to explain, so I'll show you the code format:
HTML:
<div id="block" class="red single"></div>
<div id="block" class="blue double"></div>

CSS:
#block {
    display: block;
    height: 16px; /* animate to: 39px */
    background-color: #eee;
}

#block.red {
    background-color: red;
}

#block.blue {
    background-color: blue;
}

#block.single {
    width: 50px; /* animate to: 100px */
}

#block.double {
    width: 100px; /* animate to: 200px */
}

jQuery:
    if($("#block").hasClass("double")) {
        respectiveWidth = "200px"
    }

    if($("#block").hasClass("single")) {
        respectiveWidth = "100px"
    }

    $("#block").delay(delayRate).animate({
        height: "145px",
        width: respectiveWidth
    }, 900);

I would just do as follows:
$("#block").animate({
    height: "39px"
});

$("#block.single").animate({
    width: "100px"
});

$("#block.single").animate({
    width: "200px"
});

But that animates #block.single before it animates #block.double, and I wish to animate them simultaneously.  
Any help would be very much appreciated, I am ready to be done with this.  Hehe. 

A:

IDs must be unique, you can use classes instead, try the following. 
<div class="block red single"></div>
<div class="block blue double"></div>

$(".block").animate({
    height: "39px"
});

$(".block.single").animate({
    width: "100px"
}, 700);

$(".block.double").animate({
    width: "200px"
}, 700);

http://jsfiddle.net/eCUf8/

