Apply Same CSS to multiple ID's using Jquery

Question

I need an html structure that looks like this:

<div id="ABTestBanner_New">
</div>

<div id="ABTestBanner_Fav">
</div>

<div id="ABTestBanner_Budget">
</div>

I need to use it in an AB split test. So I need to write in javaScript, and I need all three divs to be unique id's but have the same CSS. I tried to do it this way but only the #ABTestBanner_Budget is getting the CSS applied:

var $divNew = $('<div></div>', {'id': 'ABTestBanner_New'});
$('div.samplesCell.samples1').after($divNew)

var $divFav = $('<div></div>', {'id': 'ABTestBanner_Fav'});
$($divNew).after($divFav);

var $divBudget = $('<div></div>', {'id': 'ABTestBanner_Budget'});
$($divFav).after($divBudget);

$('#ABTestBanner_New' && '#ABTestBanner_Fav' && '#ABTestBanner_Budget').css({
    float : 'left',
    height : '250px',
    width : '950px',
    backgroundColor:'#0080FF',
    margin:'20px 0px 20px 0px'
});

Any thoughts on what I am doing wrong?

Answer 1

See jquery docs here: http://api.jquery.com/category/selectors/

$('#ABTestBanner_New, #ABTestBanner_Fav, #ABTestBanner_Budget').css({
    /*your style*/
});