title: Jquery plugin to work on multiple elements
body: <p>I've been developing a simple plugin for jquery, I have managed to get it to work perfectly for singular elements but I can't get it to work for use on more than one element on a page.</p>
  
  <p>How do I construct the function to work on multiple elements?</p>
  
  <p>Here's my construct, its really basic.</p>
  
  <pre><code>(function($){
      $.fn.pluginName= function(prop){
  
      var params = $.extend({
  // param default set here
  
      },prop);
  
  // functions added here
  
      return this;    
      }
  })(jQuery);
  </code></pre>
  
  <p>This works fine for a singular use on page but if I wanted to make this work for multiple elements how would I do that?</p>
  
  <p>The function is meant to change input fields so would need to work for multiple instances on a page.</p>
  
  <p>I tried adding a <code>this.each(function(){ ... })</code> to wrap around main content but this returned the same result.</p>
  
  <p>Any help would be greatly appreciated as I'm not sure where to go with this and other tutorials will make me strip out the entire code and start again.</p>
  
  <p>Thanks</p>
  
  <p>EDIT</p>
  
  <p>I've edited my code, I can not get the function to call through.</p>
  
  <pre><code>(function($){
  
      $.fn.colorChange= function(params){
          var defaults= {
              backgroundColor: 'red'
          };
  
          var params = $.extend(defaults, params);
  
          return this.each(function(){
  
          changeColor();
  
              function changeColor(defaults){
              $(this).css({
                  'background-color' : defaults.backgroundColor
              });
              }
          });
      }
  
  })(jQuery);
  </code></pre>
  
  <p>If I don't wrap this in a function and just create it as an anonymous function it works fine. However I intend to have many functions and the code could get a bit sloppy.</p>
  
  <p>For some reason this is not working, any help?</p>