title: how can i have one function be used on multiple items without creating seperate ids?
body: <p>I have a game where there are balloons and each balloon has an <code>onclick</code> attribute which passes the id into a JS function to change the css.  </p>
  
  <p>Example:</p>
  
  <pre><code>&lt;div id="balloon" class="container" onclick="popBalloon(this.id);"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>clicking this item will call the function below</p>
  
  <pre><code>function popBalloon(id){
      document.getElementById(id).setAttribute("class","pop");
  }
  </code></pre>
  
  <p>Problem is that I have multiples balloons of the same type, and instead of using a unique id for each one, I would like a way to determine the specific balloon being clicked using the same attribute names.</p>
  
  <p>Is this possible?</p>