Witam, mam pewien problem.

Posiadam 3 kwadraty

[HTML] pobierz, plaintext 
<div id="1" style="margin:1%;background:pink;width:100px;height:100px;float:left;">
</div>
<div id="2" style="margin:1%;background:pink;width:100px;height:100px;float:left;"></div>
<div id="3" style="margin:1%;background:pink;width:100px;height:100px;float:left;"></div>
[HTML] pobierz, plaintext 

oraz 2 divy "sterujące"

[HTML] pobierz, plaintext 
<div id="left" onClick="left()" style="margin:1%;background:blue;width:50px;height:50px;float:left;">left</div>
<div id="right" onClick="right()" style="margin:1%;background:blue;width:50px;height:50px;float:left;">right</div>
[HTML] pobierz, plaintext 

w Javascript koloruje jeden kwadrat
var id = "'.rand(1,3).'";
document.getElementById(id).style.background = "red";

I nie wiem jak zrobić, by po liknięciu w odpowiedni "div sterujący" kolor kwadratu "przeszedł" na kwadrat sąsiedni :/
Ktoś wie jak to zrobić?

[JAVASCRIPT] pobierz, plaintext 
var id = "'.rand(1,3).'";
document.getElementById(id).style.background = "red";
var change = 1;
 
function left() {
    var newid = id - change;
    document.getElementById(newid).style.background = "red";
    document.getElementById(id).style.background = "pink";
    id = newid;
}
 
function right() {
    var newid = id + change;
    document.getElementById(newid).style.background = "red";
    document.getElementById(id).style.background = "pink";
    id = newid;
}
[JAVASCRIPT] pobierz, plaintext