jQuery custom function w/ date.js

Question

I'm trying to build a custom date.js function that (paired with bootstrap) will respond to each input...

My function works for the FIRST item in a series of fields if I say $(".date-js").changeIt();, but only the first.

$.fn.changeIt = function() {
    var input = "input#" + $(this).attr('id');
    input = $(input).data('val', $(input).val()); // save value
    $(input).change(function() { // works when input will be blured and the value was changed
        date = Date.parse(input.val());

        if (date !== null) {
            input.removeClass();
            input.parent().removeClass("error success");
            input.parent().addClass("success");
            input.addClass("success");
        } else {
            input.removeClass();
            input.parent().removeClass("error success");
            input.addClass("field_with_errors");
            input.parent().addClass("error");
        }
    });

    $(input).keyup(function() { // works immediately when user press button inside of the input
        if ($(input).val() != $(input).data('val')) { // check if value changed
            $(input).data('val', $(input).val()); // save new value
            $(this).change(); // simulate "change" event
        }
    });
}

= form_for [@tool, @calibration] do |f|
  #errors
  .form-container
    -if @tool.status == "In"
      %p Enter time taken for calibration
      .field.control-group
        = f.label :ats_in
        = f.text_field :ats_in, :class => "date-js"
    -if @tool.status == "Out"
      %p Enter time returned
      .field.control-group
        = f.label :cal_date
        = f.text_field :cal_date, :class => "date-js"
      .field.control-group
        = f.label :cal_date_due
        = f.text_field :cal_date_due, :class => "date-js"
      .field.control-group
        = f.label :ats_out
        = f.text_field :ats_out, :class => "date-js"
  .clear
  = f.submit 'Save', :disable_with => "Saving..."

Answer 1

Wrap your plugin code in return this.each(function () { }); then it will apply to all matching elements. Updated Code:

$.fn.changeIt = function() {
    return this.each(function() {
        var input = "input#" + $(this).attr('id');
        input = $(input).data('val', $(input).val()); // save value
        $(input).change(function() { // works when input will be blured and the value was changed
            date = Date.parse(input.val());
            if (date !== null) {
                input.removeClass();
                input.parent().removeClass("error success");
                input.parent().addClass("success");
                input.addClass("success");
            } else {
                input.removeClass();
                input.parent().removeClass("error success");
                input.addClass("field_with_errors");
                input.parent().addClass("error");
            }
        });

        $(input).keyup(function() { // works immediately when user press button inside of the input
            if ($(input).val() != $(input).data('val')) { // check if value changed
                $(input).data('val', $(input).val()); // save new value
                $(this).change(); // simulate "change" event
            }
        });
    });
}