Multiple javascript buttons (Enable/Disable)
<p>I have made a menu with 8 enable/disable javascript functions buttons and I'm using the same javascript code to function all 8 buttons but using different css class for them so I can get them to work. My question is how can I get them to work to where when you click each one they will function.  </p>

<p>Javascript Code: I used this code 7 more times with red1 red 2 so on green1 green2 so on</p>

<pre><code>// Left Menu function controls(className) {
if (className == "red") {
    document.getElementById('Skip').setAttribute('class','green');
    // You can define your play music statements here
} else {
    document.getElementById('Skip').setAttribute('class','red');
    // You can define your stop music statements here        
} }

if (className == "red1") { 
document.getElementById('Text').setAttribute('class','green1'); 
// You can define your play music statements here } else { 
document.getElementById('Text').setAttribute('class','red1'); 
// You can define your stop music statements here         } }
</code></pre>

<p>Css Code: Same code for all 8 buttons .red1 .red2 etc. .green1 .green2 etc.</p>

<pre><code>.red { 
background: red; 
height: 30px;
width: 30px;
border-radius: 50px;
border: 1px solid #000;}                                                                                               

.green { 
background: green;
height: 30px;
width: 30px;
border-radius: 50px;
border: 1px solid #000;}
</code></pre>

<p>Html code:</p>

<pre><code>Skip &amp;nbsp; &lt;button id="Skip" class="red" onclick="controls(this.getAttribute('class'))"&gt;Play&lt;/button&gt;

Text &amp;nbsp; &lt;button id="Text" class="red1" onclick="controls(this.getAttribute('class'))"&gt;Play&lt;/button&gt;
</code></pre>

<p>and 6 more buttons with same code red2 red3 so on.</p>
