Can I generate IDs for table cells based on number of rows being returned to view?

Question

Long story short. I'm attempting to implement a file upload feature in my C# MVC 3 application. I have a fileuploader.js file which I beleive was taken was taken from http://github.com/valums/file-uploader (this is not my application originally). I'd like to make the file upload feature available to reach row on the table in my view, number of rows will be based on the number of entries received from the database. The problem I'm encountering at present is that the Upload btn is only appearing on the first row. I'm certain this is because this feature begins with finding the div with an id of "file-uploader-attachment" I tried changing the javascript to document.getElementsByClass and giving the div a class instead of an ID but it was unsuccessful. So I need to either generate and assign ID's on the fly or of another way to id elements in each row and allow the javascript to find them. I will put on more code as needed, but I don't want to fill the page with code. If someone can point me in the right the direction or knows of a similar solution. Again, I need a file upload btn/feature for each row in a table whose size is changeable.

cell in table

  <td id="file-uploader-attachment"></td>

start of the createUploader() function in associated javascript code

     var uploader = new qq.FileUploader({
             element: document.getElementById('file-uploader-attachment'),

script in view:

 <script type="text/javascript">
$(document).ready(function () {

    // requests attachments from server, clears existing attachments and
    // replaces with most up to date attachments
    function LoadAttachments() {
        $('.loading').show();
        $.post('/CalibrationViewer/GetAttachments', { calibrationId: CAL_ID }, function (data) {
            $('#attachment').empty();
            $('#attachment').append(data);
            $('.loading').hide();
        });
    }

    function handleCheckbox() {
        if ($(this).find(':checkbox').is(':checked')) {
            //$(this).find('#file-uploader-attachment').html($('#myHTML').html());
            createUploader();
            $(this).find('file-uploader-attachment-Class').removeClass("upload-placeholder-unchecked");
            $(".qq-upload-button").css("margin-top", "-6px");
            $(".qq-upload-button").css("margin-bottom", "-20px");

        }
        else {
            $(this).find('.file-uploader-attachment-Class').addClass("upload-placeholder-unchecked");
            $(this).find('.file-uploader-attachment-Class').html($('#myHTML2').html());
        }
    }

    $('tr').each(handleCheckbox);
    $('tr').on('click', handleCheckbox);

    function createUploader() {

        $(".file-uploader-attachment-Class").each(function (element) {
            var uploader = new qq.FileUploader({
                element: element,
                sizeLimit: 2147483647, // max size
                action: '/Controller/Action',
                allowedExtensions: ['xls', 'xlsx', 'pdf', 'doc', 'docx', 'csv', 'txt', 'rtf', 'zip', 'zipx', '7z'],
                params: {
                    customer: CUST_NAME,
                    calibrationId: CAL_ID
                },
                multiple: false,
                debug: false,

                onComplete: function (id, fileName, responseJson) {
                    var resultMessage = document.getElementById('resultMessage');
                    alert(responseJson.msg);
                    $('#resultMessage').addClass('greenText');
                    resultMessage.innerHTML = responseJson.msg;

                    $('#attachment').prepend('<p><a class="attachment-file" href="' + responseJson.fileId + '">' + responseJson.fileName + '</a>');
                    $('#removeAttachment').prepend('<p><a class="attachment-delete" href="' + responseJson.fileId + '">X</a></p>');

                    $('#no-attachments').remove();
                }

            });

        });
    }
});

Answer 1

The reason is that you can have an id (file-uploader-attachment) only once in your html page (they should be unique). If they are not unique the first one is taken (if this is by standard or common sense, I do not know).

What you want to achive is something like this:

<td class="file-uploader-attachment"></td>

and

 var elements = document.getElementsByClassName('file-uploader-attachment');
 Array.prototype.filter.call(elements, function(element){
 var uploader = new qq.FileUploader({
         element: element, ...
 });

or even simpler with jquery (if already in use):

$(".file-uploader-attachment).each(function (element) {
   var uploader = new qq.FileUploader({
         element: element, ...
});