Basically for ages I have used a static file upload script, originally ajaxupload. It has been edited slightly to fit our needs and with one image per page it works perfectly. However I now need multiple SEPARATE picture uploads on one page, to stop myself having to simply duplicating masses of the same code I was hoping to make the current script dynamic.

Here is the Javascript:

$(document).ready(function(){

$("#daftform").validationEngine({promptPosition : "topLeft:0,15", scroll: false}); 
                            var btnUpload=$('#upload');
                            var status=$('#swaptd');
                            new AjaxUpload(btnUpload, {
                                            action: 'upload-file-notes.php',
                                            name: 'uploadfile',
                                            onSubmit: function(file, ext){
                                                             if (! (ext && /^(jpg|png|gif|pdf|doc)$/.test(ext))){ 
                // extension is not allowed 
                                                                            status.text('File format not supported!');
                                                                            return false;
                                                            }
                                                            //status.text('Uploading...');
                                                            $('#hidebtn').hide();
                                                            $('#hideimg').show();
                                            },
                                            onComplete: function(file, response){
                                                            //alert(response);
                                                            var mytext = response.split('#');
                                                            //Add uploaded file to list
                                                            if(mytext[0]==="success"){
                                                                            str =mytext[1];
                                                                            newid = str.substring(0, str.length - 5);
                                                                            $('#myfilename').html(mytext[1]);
                                                                            document.daftform.attachments.value = mytext[1];
                                                                            $('#hidebtn').show();
                                                                            $('#hideimg').hide();
                                                            } else{
                                                                $('#myfilename').html('error had occured');
                                                            }
                                            }
                            });

            });

This relates to s imple html element:

<?php if (isset($_GET['change']) && $_GET['change'] == "image1"){?>
                                <tr>
                                    <td align="right">Thumbnail:</td>
                                    <td>
                                        <table>
                                            <tr>
                                                <td>
                                                    <div id="upload" >
                                                        <button id="upload" type="button">Upload</button>
                                                    </div>
                                                </td>
                                                <td id="myfilename">
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <?php } else { ?>
                                <tr>
                                    <td align="right">Banner:</td>
                                    <td align="left">
                                        <img src="../shop/<?php echo $subcatinforow['SubCatBan']; ?>" width="230" border="0">&nbsp;<a href="productupdate.php?change=image1&id=<?php echo $prodID; ?>"><img src="images/1001-cancel16.gif" width="16" height="16" alt="" border="0"></a>
                                        <div id="upload"></div>
                                    </td>
                                </tr>
                                <?php } ?>

As you can see once an image is 'canceled' an upload button will appear in a div identified as 'upload' this is what the javascript looks for.

I am looking for a way to make that dynamic so i can have multiple html elements such as the one above, all with a different id. I am aware that there is a Jquery This function, however can anyone suggest how to call this on click of the button... or another effective way to accomplish this.

The line basically is:

var btnUpload=$('#upload');

upload needs to become a dynamic variable

Hope that all makes sense.