[Gamestop]

<

<ul id="base">
	<li>
		<a id="cat_1" href="">one</a>
		<ul id="group_1" class="group">
			<li>
			<a href="">one-one</a>
			</li>
			<li>
			<a href="">one-two</a>
			</li>
			<li>
			<a href="">one-three</a>
			</li>
		</ul>
	</li>
	<li>
		<a id="cat_2" href="">two</a>
		<ul id="group_2"  class="group">
			<li>
			<a href="">two-one</a>
			</li>
			<li>
			<a href="">two-two</a>
			</li>
			<li>
			<a href="">two-three</a>
			</li>
		</ul>
	</li>
	<li>
		<a  id="cat_3" href="">three</a>
		<ul id="group_3"  class="group">
			<li>
			<a href="">three-one</a>
			</li>
			<li>
			<a href="">three-two</a>
			</li>
			<li>
			<a href="">three-three</a>
			</li>
		</ul>
	</li>
	<li>
		<a id="cat_4" href="">four</a>
		<ul id="group_4"  class="group">
			<li>
			<a href="">four-one</a>
			</li>
			<li>
			<a href="">four-two</a>
			</li>
			<li>
			<a href="">four-three</a>
			</li>
		</ul>
	</li>
</ul>

document.addEventListener("DOMContentLoaded", function(){

	var el = document.getElementById('base').children.length
	for(var i = 1; i < el; i++)
	{
		document.getElementById('cat_' + i).onclick = function(){
		
			document.getElementById('group_' + i).style.display = "none"
			
			//Даже если alert(i) сделать то при нажатии на все кнопочки, будет показывать 4, 
			// как сделать чтобы на каждую кнопку своя циферка выводилась?, по порядку 1, 2, 3, 4
		
		}
		
	}
}, false)

локальная переменная i, в конце цикла и на первую обьявленную функцию вешается, а мне надо чтобы каждый cat_x, при нажатии на него прятал свою group_x, а то получается что они последнюю всегда будут прятать, это даже видно по алерту