title: Sharing a Common Variable Between Event Handlers in JQuery
body: <p>I am having the following index.html, There i am having two sections section 1 and section 2 as shown in the screenshot</p>
  
  <p><img src="https://i.stack.imgur.com/woFTP.png" alt="enter image description here"></p>
  
  <p>Index.html</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt;
  &lt;head&gt;
      &lt;!--START: Adding of javaScript library --&gt;
      &lt;script type="text/javascript" src="/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="myscript.js"&gt;&lt;/script&gt;
      &lt;!--END:   Adding of javaScript library--&gt;
      &lt;script&gt;
      jQuery(document).ready(function() {
          jQuery('.mySectionOne').updateCommonVar({commonVar:1});
          jQuery('.mySectionTwo').updateCommonVar({commonVar:1});
      }); 
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;p&gt;Section 1:&lt;/p&gt;
      &lt;div class="mySectionOne"&gt;
          &lt;button class="add"&gt;add&lt;/button&gt;        
          &lt;button class="sub"&gt;sub&lt;/button&gt;        
          &lt;button class="show"&gt;show&lt;/button&gt;  
          &lt;p&gt;The value of Common var in section one is:&lt;span class="showVal"&gt;&lt;/span&gt;&lt;p&gt;
      &lt;/div&gt;
  
  &lt;p&gt;Section 2:&lt;/p&gt;   
      &lt;div class="mySectionTwo"&gt;
          &lt;button class="add"&gt;add&lt;/button&gt;        
          &lt;button class="sub"&gt;sub&lt;/button&gt;        
          &lt;button class="show"&gt;show&lt;/button&gt;  
          &lt;p&gt;The value of Common var in section two is:&lt;span class="showVal"&gt;&lt;/span&gt;&lt;p&gt;
      &lt;/div&gt;      
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>In Index.html, i am using my own custom jQuery Plugin "updateCommonVar", the definition for plugin is present in myscript.js</p>
  
  <p>myscript.js</p>
  
  <pre><code>(function( $ ) {
      $.fn.updateCommonVar = function (options) {
          var defaults= {
              commonVar:0,
          }
          var ParameterObject=  $.extend({}, defaults, options);
           this.each(function() {
                  $(this).find("button.add").bind("click", {commonVar:ParameterObject.commonVar},fnAddOne);
                  $(this).find("button.sub").bind("click", {commonVar:ParameterObject.commonVar},fnSubOne);
                  $(this).find("button.show").bind("click",{commonVar:ParameterObject.commonVar},fnShow);
           });
           return this;  
      };
  
      function fnAddOne(e){
          e.data.commonVar++;     
      }
      function fnSubOne(e){
          e.data.commonVar--;
      }
      function fnShow(e){
          $(this).parent().find('.showVal').html(e.data.commonVar);
      }
  
  
  })( jQuery );
  </code></pre>
  
  <p>I am passing value of a variable commonVar as "1" from index.html for both the section, i bind the event handler for each button add sub and show in plugin definition, here what i want is </p>
  
  <p>on clicking the add button: the variable i passed commonVar to be incremented by 1.
  on clicking the sub button: the variable i passed commonVar to be deccremented by 1.
  on clicking the add button: the variable i passed commonVar is to be shown in the span tag with the class "showVal".</p>
  
  <p>First I clicked the add button and then i clicked the show button, but still i got value of commonVar as <code>1</code> not the expected value <code>2</code>. I am not sure about passing the common variable between the event handlers. Please help me in this. Thanks in advance for any help.</p>
  
  <p>I am expecting the same behavior for the section2 but still i got what i got for section1 note: section 2 is independent of section 1.</p>
  
  <p>Fiddle for the same:<a href="http://jsfiddle.net/shmdhussain/PXYAh/1/" rel="nofollow noreferrer">http://jsfiddle.net/shmdhussain/PXYAh/1/</a></p>