manipuler plusieurs setTimeout

bonjours tout le monde, voila je suis débutant en JavaScript, mon souci est de réaliser une fonction JavaScript qui clignote plusieurs div séparément, en cliquant sur des boutons pour chaque div. pour la suite en cliquant sur un autre bouton on pourra arrêter le clignotement d'un div spécifique à l'aide de son id par exemple.
cela fait 3 jours et j'arrive toujours pas, je vous prie de m'aider .
voila mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
 
    function changeBG(colorPassed,id){
 
       if(colorPassed=='dddddd'){  
    colorPassed2='FF0000';  
    document.getElementById(id).style.background = "#" + colorPassed2;
 
    }
    if(colorPassed=='FF0000'){
colorPassed2='dddddd';  
    document.getElementById(id).style.background = "#" + colorPassed2;
 
    }
   colorPassed=colorPassed2;
setTimeout("changeBG('"+colorPassed+"','"+idd+"')", 2000);
}
 
function clear(id){
 clearTimeout(id);
}
    </script>

HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div  id="div1" class="onglet_fi onglet">
       div1
      </div>
 
   <div  id="div2" class="onglet_fi onglet">
       div2
      </div>
 
 <input type="button" VALUE=" demmare div1 " onclick="javascript:changeBG('dddddd','div1');">
 <INPUT TYPE="button" VALUE=" Stop div1 " onClick="clear('div1');">  
 <input type="button" VALUE=" demmare div2 "onclick="javascript:changeBG('dddddd','div2');">
 <INPUT TYPE="button" VALUE=" Stop div2 " onClick="clear('div2');">

CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.onglet
 {
  display:inline-block;
  margin-left:3px;
  margin-right:3px;
  padding:3px;
  border:1px solid black;
  cursor:pointer;
 }
 .onglet_fi
 {
 color:#FD00D9;
  background:#dddddd;
  border-bottom:1px solid black;
 }

merci d'avance