Interpolation with single quotes in Javascript

See more:

Javascript

I have this Javascript code inside an .erb file in Ruby on Rails (click here to see original file):

<script type="text/javascript">
	hidden = 0;
	if ($('#categories_terms_root2').val() == '') {
		$('#categories_terms_root2').hide();
		hidden = 1;
	}

	if ($('#categories_terms_root3').val() == '') {
		$('#categories_terms_root3').hide();
		hidden = 1;
	}

Gm.Slnc.hide('categories_terms_root_more');

	if (hidden == 1) {	
		Gm.Slnc.show('categories_terms_root_more');
		}

function show_all_categories_terms_contents() {
	$('#categories_terms_root2').show();
	$('#categories_terms_root3').show();

		Gm.Slnc.hide('categories_terms_root_more');
		return false;
}
</script>

#categories_terms_rootX, is used to show or hide more categories when publishing a content in the webpage.

This script is used to show max number of categories, by clicking on a button called "Associate to more than one category", as you can see here:

http://i281.photobucket.com/albums/kk205/LEANDRO351/Gamersmafia/categories.jpg[^]

Now, I want to add more categories, and of course if I do it on this way (and changing other lines in the document) it works:

<script type="text/javascript">
	hidden = 0;
	if ($('#categories_terms_root2').val() == '') {
		$('#categories_terms_root2').hide();
		hidden = 1;
	}

	if ($('#categories_terms_root3').val() == '') {
		$('#categories_terms_root3').hide();
		hidden = 1;
	}

	if ($('#categories_terms_root4').val() == '') {
		$('#categories_terms_root4').hide();
		hidden = 1;
	}

	if ($('#categories_terms_root5').val() == '') {
		$('#categories_terms_root5').hide();
		hidden = 1;
	}

	if ($('#categories_terms_root6').val() == '') {
		$('#categories_terms_root6').hide();
		hidden = 1;
	}

Gm.Slnc.hide('categories_terms_root_more');

	if (hidden == 1) {	
		Gm.Slnc.show('categories_terms_root_more');
		}

function show_all_categories_terms_contents() {
	$('#categories_terms_root2').show();
	$('#categories_terms_root3').show();
	$('#categories_terms_root4').show();
	$('#categories_terms_root5').show();
	$('#categories_terms_root6').show();

		Gm.Slnc.hide('categories_terms_root_more');
		return false;
}
</script>

But I want to create a loop to generate it without rewriting or deleting all those lines every time I need to modify the number of maximum categories.

I tried various things, like next one, but none worked for me:

<script type="text/javascript">
	hidden = 0;
        // modified block 
        for(var i=2; i<=6; i++){
          if ($("#categories_terms_root" + i)).val() == '') {
            $("#categories_terms_root" + i).hide();
            hidden = 1;
          }
        }
        // end of modified block
Gm.Slnc.hide('categories_terms_root_more');

	if (hidden == 1) {	
		Gm.Slnc.show('categories_terms_root_more');
		}

// modified block 
function show_all_categories_terms_contents() {
  for(var i=2; i<=6; i++){
    $('#categories_terms_root' + i).show();
  }
// end of modified block

		Gm.Slnc.hide('categories_terms_root_more');
		return false;
}
</script>

Please, could someone tell me what's going on?

Thanks in advance, and sorry for my english :P