title: Javascript variables in asp.net usercontrols - overwriting variables in same inserted usercontrol
body: <p>I have four same UserControls inserted into Default.aspx. I want to write the data into HiddenField and write this data into Label1 using javascript.</p>
  
  <p>The method only works for the last loaded UserControl - HiddenFieldLoader3.</p>
  
  <p>Why the method does not work in all usercontrols? How can i fix my code?</p>
  
  <p><strong>Default.aspx</strong></p>
  
  <pre><code>&lt;%@ Register Src="~/HiddenFieldLoader.ascx" TagPrefix="uc1" TagName="HiddenFieldLoader" %&gt;
  
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;Default.aspx&lt;/title&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="HiddenFieldLoader.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
          &lt;uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader" /&gt;
          &lt;uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader1" /&gt;
          &lt;uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader2" /&gt;
          &lt;uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader3" /&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>UserControl: <strong>HiddenFieldLoader.ascx</strong></p>
  
  <pre><code>&lt;%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HiddenFieldLoader.ascx.cs" Inherits="NewControls.HiddenFieldLoader" %&gt;
  
  &lt;script type="text/javascript"&gt;
      HFLoader.declareVariables("&lt;%=Button1.ClientID %&gt;", "&lt;%=HiddenField1.ClientID %&gt;", "&lt;%=Label1.ClientID %&gt;");
  &lt;/script&gt;
  
  &lt;asp:Label ID="Label1" runat="server" Text="Label"&gt;&lt;/asp:Label&gt;
  &lt;asp:HiddenField ID="HiddenField1" runat="server" /&gt;
  
  &lt;input type="button" ID="Button1" value="Save" runat="server" /&gt;
  
  &lt;input type="button" ID="Button2" onclick="HFLoader.showEvent();" value="Show" runat="server" /&gt;
  </code></pre>
  
  <p>Javascript file: <strong>HiddenFieldLoader.js</strong></p>
  
  <pre><code>HFLoader = {
  
      button: null,
      hiddenField: null,
      label: null,
  
      declareVariables: function (btn, hf, label) {
          HFLoader.button = btn;
          HFLoader.hiddenField = hf;
              HFLoader.label = label;
          },
          ///////SHOW EVENT
          showEvent: function () {
              $("#" + HFLoader.label).html($("#" + HFLoader.hiddenField).val());
  
          },
          //////!SHOW EVENT
          saveHiddenField: function (data) {
  
          $("#" + HFLoader.hiddenField).val(data);
      },
  
      buttons: function () {
          $("#" + HFLoader.button).click(function () {
  
              var datatest = "Data from button ID: " + $(this).attr("id");
              HFLoader.saveHiddenField(datatest);
              $("#" + HFLoader.label).html($("#" + HFLoader.hiddenField).val());
              return false;
          });
      },
  
      init: function () {
          $(function () {
  
              HFLoader.buttons();
  
          });
      }
  
  };
  
  HFLoader.init();
  </code></pre>