Активатор jQuery не работает на нескольких DIV

Итак, я делаю настройку, где, когда я нажимаю один из div с идентификатором "sbox", он будет делить div с идентификатором "box" expand и opacity change, это jQuery, который у меня есть,

$(document).ready(function(){
  TriggerClick = 0;

  $("#sbox").click(function(){
    if(TriggerClick==0){
         TriggerClick=1;
         $("#box").animate({width:'100px', height:'100px', opacity: '0'}, 500);
    }else{
         TriggerClick=0;
         $("#box").animate({width:'500px', height: '500px', opacity: '1'}, 500);
    };
  });
});

Теперь, когда у меня есть несколько div с идентификатором "sbox", только первый ящик будет делать анимацию:

<div id="sbox">WORKS</div>
<div id="sbox">This one doesn't</div>
<div id="sbox">This one doesn't</div>
<div id="sbox">This one doesn't</div>
<div id="sbox">This one doesn't</div>

<div id="box">This is the box that expands</div>

И lastyl, я не уверен, поможет ли это, но вот моя таблица стилей:

#box {
    width: 100px;
    height: 100px;
    background: red;
    opacity: 0;
    position: fixed;
    left: 50%;
    right: 50%;
}

#sbox {
    background: blue;
    margin: 2px;
    display: inline-block;
    width: 50px;
    height: 50px;
}

Если у вас есть идеи или предложения для моего кода, пожалуйста, ПОЖАЛУЙСТА, попробуйте помочь. Спасибо.

-РЕДАКТИРОВАТЬ-

Моя цель состоит в том, чтобы получить массив ящиков и одну большую коробку, которая невидима, когда вы нажимаете одно из полей в массиве, большая коробка расширяется и становится видимой, когда вы нажимаете тот же самый ящик, он сжимается и становится невидимым.