How to correctly handle javascript functions in multiple webcontrols

Question

I have a webcontrol that will exist multiple time on a page. I have some javascript (JQuery) in the control and when I have multiple controls on a page the functions get confused.

I have seen plenty of stuff on why this is the case - basically my functions use set id's but i need to somehow make them relative.

An example of a function ...

function showUploader() {
    var img = $('#<%=ImgID.ClientID %>');
    $('#<%=UploaderIFrame.ClientID %>').attr('src', '<%=ResolveUrl("~/Controls/EditableImageControl/ImageUploader/ImageUploader.aspx") %>' + '?ImgID=' + img.attr('innerHTML')).show();
    $('#<%=lnkEdit.ClientID %>').hide();

}

function hideUploader() {
    $('#<%=UploaderIFrame.ClientID %>').attr('src','').hide();
    $('#<%=lnkEdit.ClientID %>').show();
}

Can anyone provide me with an example of how to get references to the html elements in the web control?

Answer 1

from c# :

UploaderIFrame.ID = "UploaderIFrame_" + uniqueID;

on the iteration of adding controls first add control then call its properties & methods