Javascript Counter +1

Javascript Counter +1

I'm using this script to load a list of images. I want to add a textbox
with a counter of each row.
Example:
row 1 :
thumbnail filename Textbox(Value 1)
row 2 :
thumbnail filename Textbox(Value 2)
row 3 :
thumbnail filename Textbox(Value 3)
etc..
..
My problem is that the counter not add +1 to the variable for the each row.
All rows in this moment showing me the same value
Someone can give me a hand with this? Here is the code:
@{
int counter = 1;
}
<script>
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td class="preview" style="border:none"><span
class="fade"></span></td>
<td class="name"
style="border:none"><span>{%=file.name%}</span></td>
<td class="size"
style="border:none"><span>{%=o.formatFileSize(file.size)%}</span></td>
{% if (file.error) { %}
<td class="error" colspan="2" style="border:none"><span
class="label
label-important">{%=locale.fileupload.error%}</span>
{%=locale.fileupload.errors[file.error] ||
file.error%}</td>
{% } else if (o.files.valid && !i) { %}
<td style="border:none">
<div class="progress progress-success progress-striped
active"><div class="bar"
style="width:0%;"></div></div>
</td>
<td class="start" style="border:none">{% if
(!o.options.autoUpload) { %}
<button class="btn btn-primary">
<i class="icon-upload icon-white"></i>
<span>{%=locale.fileupload.start%}</span>
</button>
{% } %}</td>
{% } else { %}
<td colspan="2" style="border:none"></td>
{% } %}
<td class="cancel" style="border:none">{% if (!i) { %}
<button class="btn btn-warning">
<i class="icon-ban-circle icon-white"></i>
<span>{%=locale.fileupload.cancel%}</span>
</button>
{% } %}</td>
<td class="DisplayOrder"><input type="text"
name="DisplayOrder" value="@counter"></td>
</tr>
{% @counter=@counter+1} %}
</script>