How to change background of another div without affecting the first one
<p>I basically have to make this board that has numbers from 1 to 50 and whenever you click on one number, its background changes to a different color. I was able to do it with the first one by making the <code>&lt;div&gt;</code> clickable but I don't know how to do it with the second one that is supposed to have the value 2. Here are my codes</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var Color = "#FF0";

function theFunction() {
  if (Color == '#FF0') {
    Color = '#F00';
  } else {
    Color = '#FF0';
  }

  document.getElementById('choose').style.backgroundColor = Color;

}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div#gameboard {
  background: #CCC;
  border: #999 2px solid;
  width: 1200px;
  height: 900px;
  margin: 70px;
  margin-top: 40px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="gameboard"&gt;
  &lt;div id="choose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();"&gt;
    1
  &lt;/div&gt;
  &lt;div id="chose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();"&gt;
    2
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>So what shall I do for the second div? Thanks</p>