Reuse jquery plugin without conflict

Question

I have a little plugin working as a progressbar. the problem is: I can't update progressbar's value because every change I made, affect just the last object created =(

also.. if I call it as: $(node-selector).progBar().setValue() it works calling the correct node but it loss the config object

follow the code:

	var elm1;
	var elm2;

	$(function($){

		$.fn.progBar = function ( config ){

			if ( typeof ( config ) === "string" ) {
				config = {'text':config} ;
			}

			var config = $.extend ({
				'text' : false
			}, config );

		    return this.each(function( ){

				var $this       = $(this); // $this is the main element

				$this.css("width","200px")
				$this.css("padding","4px 10px")
				$this.css("text-align","center")
				$this.css("background","#eee")
				$this.css("font-weight","bold")
				$this.css("border","1px solid #00F")
				$this.html(config.text)

				$.fn.setValue = function ( newValue ) {
					$this.html(config.text + " " + newValue)
				};

		    });

		};

		elm1 = new $("#elm1").progBar("this is the first...")
		elm2 = new $("#elm2").progBar("this is the seccond...")

		// both lines below just affect the #elm2 object
		elm1.setValue("first")
		elm2.setValue("seccond") // this will overrite line above

	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div id="elm1" ></div>
<div id="elm2" ></div>

Answer 1

The return this.each... was causing the problem - you were reassigning the setValue function for all instances created with the progBar method. This update should get you going the right direction:

var elm1;
var elm2;

$(function($) {

  $.fn.progBar = function(config) {

    if (typeof(config) === "string") {
      config = {
        'text': config
      };
    }

    var config = $.extend({
      'text': false
    }, config);

    this.css("width", "200px")
    this.css("padding", "4px 10px")
    this.css("text-align", "center")
    this.css("background", "#eee")
    this.css("font-weight", "bold")
    this.css("border", "1px solid #00F")
    this.html(config.text)
    this.setValue = function(newValue) {
      var currentInnerText = this.html();
      this.html(currentInnerText + " " + newValue)
    };
    return this;
  };



  elm1 = new $("#elm1").progBar("this is the first...");
  elm2 = new $("#elm2").progBar("this is the seccond...");

  // both lines below just affect the #elm2 object
  elm1.setValue("first");
  elm2.setValue("seccond"); // this will overrite line above


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div id="elm1"></div>
<div id="elm2"></div>