Javascript For Loop On Array of Input fields issue with document.getElementById

I have an serverside script making an amount of text fields for me. When I want a user to fill them up, and submit data. I know how many fields there are, as the server also sends a count.

I am then trying to join them into a long string with a spacer between. But I am having trouble getting the value of the array.

Better explained with code.

This works

        <script>
function Submit() {
    var spacer = ":";
    var mycount = document.getElementById('counter').value;
    var usertext = '';
    var x=0;
    for(x = 0; x **<= 2**; x++){
        usertext = usertext + document.getElementById('description[' + x + ']').value + spacer ;
    }
</script>

This does not work.

    <script>
function Submit() {
    var spacer = ":";
    var mycount = document.getElementById('counter').value;
    var usertext = '';
    var x=0;
    for(x = 0; x **<= mycount**; x++){
        usertext = usertext + document.getElementById('description[' + x + ']').value + spacer ;
    }
</script>

This is my body

    <textarea   id='counter' name='counter'>2</textarea>
<textarea   id='description[0]' name=''description'>zero</textarea>
<textarea   id='description[1]' name=''description'>one</textarea>
<textarea   id='description[2]' name=''description'>two</textarea>
<button type="button" onclick="Submit()" >Save</button>

This is the error Firebug gives me:

document.getElementById("description[" + x + "]") is null

Does anyone know a way to do this?

thanks