title: How can I assign a dynamic ID value to a label?
body: <p>I have the following code:</p>
  
  <pre><code>while ($row = $result-&gt;fetch_assoc()) {
      echo "&lt;div class='competitor' style='background: ".$row['Colour'].";'&gt;";
      echo "&lt;div class='competitorname'&gt;".$row['CompetitorName']."&lt;/div&gt;&lt;br&gt;";
      echo "&lt;div class='competitorscore' id='".$row['CompetitorID']."'&gt;";
          echo"&lt;label id='".$row['CompetitorName']."'&gt;&lt;/label&gt;&lt;/div&gt;";
          echo "&lt;input type='button' value='Increase' id='inc' onclick='incNumber()'/&gt;";
          echo "&lt;input type='button' value='Decrease' id='dec' onclick='decNumber()'/&gt;";
  }
  </code></pre>
  
  <p>The code is linked to the following script:</p>
  
  <pre><code>var i = 0;
  
  function incNumber() {
      if (i &lt; 10) {
          i++;
      } else if (i = 10) {
          i = 0;
      }
      document.getElementById('display').innerHTML = i;
  }
  
  function decNumber() {
      if (i &gt; 0) {
          --i;
      } else if (i = 0) {
          i = 10;
      }
      document.getElementById('display').innerHTML = i;
  }
  </code></pre>
  
  <p>The code creates a scoreboard. It creates a div for each team with a score for that team.</p>
  
  <p>The problem I'm having is that the "Increase" and "Decrease" buttons are increasing and decreasing the score on only one team (the first one). This is because the script is looking for the label with the id='display' and linking every button to that one. </p>
  
  <p>My question is, how can I create a different ID for each team that works with the script so that each increase/decrease button is linked to a different team?</p>