How to loop same javascript code for more than one div elements?

[DNA180]

I have made three "boxes" and each box contains a button. When I click the button, box hiding, when click again, box appears. This is my html code:

	<div id="SC1_A_"> <!-- BOX -->	<div id="SC1_B_" onClick="SC1();" class="something"> </div> <!-- BUTTON -->	</div>	<div id="SC2_A_">	<div id="SC2_B_" onClick="SC2();" class="something"> </div>	</div>	<div id="SC3_A_">	<div id="SC3_B_" onClick="SC3();" class="something"> </div>	</div>

This is my javascript code:

	<script type="text/javascript">		function SC1(){		  	  var SC1_A = document.getElementById('SC1_A_);	  var SC1_B = document.getElementById('SC1_B_);			  if (SC1_A.style.display == 'block' || SC1_A.style.display == ''){		  SC1_A.className	  = 'something';		  SC1_B.className	  = 'something else';}  	else {SC1_A.className	  = 'something else';		  SC1_B.className	  = 'something';}		 }		 }	</script>

The example above works, but I have to make three similar scripts for each button. So I though to make something like this script below, using for loop. As you can imagine it didn't work. Any idea how can I make it work??? Thank you in advance!!!

	<script type="text/javascript">				for (i=1; i<10; i++){		  	function SCi(){		  	  var SCi_A = document.getElementById('SC'+i+'_A_');	  var SCi_B = document.getElementById('SC'+i+'_B_');			  if (SCi_A.style.display == 'block' || SCi_A.style.display == ''){		  SCi_A.className	  = 'something';		  SCi_B.className	  = 'something else';}  	else {SCi_A.className	  = 'something else';		  SCi_B.className	  = 'something';}		 }		 }	</script>

[justsomeguy]

Pass the prefix to the function: onClick="SC('SC1');" and use that to get the 2 elements:

function SC1(prefix){ var SC1_A = document.getElementById(prefix + '_A_');var SC1_B = document.getElementById(prefix + '_B_');