Each div must increments its counter upon clicking
<p>I've three divs. Each div must increment its counter val upon clicking them.</p>

<p>HTML:</p>

<pre><code>&lt;body&gt;
    &lt;content&gt;
        &lt;div id="box1" class="v1" onclick="counter('box1')";&gt;A : &lt;span class="num"&gt;0&lt;/span&gt;&lt;/div&gt;
        &lt;div id="box2" class="v2" onclick="counter('box2')"&gt;B: &lt;span class="num"&gt;0&lt;/span&gt;&lt;/div&gt;
        &lt;div id="box3" class="v3" onclick="counter('box3')"&gt;C: &lt;span class="num"&gt;0&lt;/span&gt;&lt;/div&gt;
    &lt;/content&gt;
&lt;/body&gt;​
</code></pre>

<p>Javascript:</p>

<pre><code>  function counter(id){
     var id = document.getElementById(id);
     $('#id').click(function () {
          update($("span"));
     });
  }

  function update(j) {
     var n = parseInt(j.text(), 10);
     j.text(n + 1);
  }
</code></pre>

<p>​</p>

<p>Here is the code <a href="http://jsfiddle.net/4eqve/12/" rel="nofollow">demo</a></p>
