title: Transforming a jQuery plugin to support multiple instances
body: <p>Here is a fictional version of my jQuery plugin, but the structure is exactly the same:</p>
  
  <pre><code>(function ($)
  {
      var initialized = false;
      var element;
      var counter = 0;
  
      $.fn.myPlugin= function(action)
      {
          if (action === "increase")
          {
              increase(arguments[1]);
          }
          else if (!initialized)
          {
              settings = $.extend({
                  ...
              }, action);
  
              initialized = true;
              element = $(this);
  
              return this;
          }
          else
          {
              console.error("Unknown function call.");
              return;
          }
      };
  
      var increase = function(amount)
      {
          counter += amount;
          element.text(counter);
      };
  }(jQuery));
  </code></pre>
  
  <p>With this code I am able to initialize my plugin like this:</p>
  
  <pre><code>$("#element").myPlugin(options);
  </code></pre>
  
  <p>And I can call the method increase like this:</p>
  
  <pre><code>$("#element").myPlugin("increase", 5);
  </code></pre>
  
  <p>However, I am not able to initialize my plugin on multiple elements on one page, because of the variables initilized, element and counter.
  How do I modify this code in such a way that I can use it multiple times on one page without changing the way you can initialize and call methods?</p>