jQuery addClass example

Change class name on click in jQuery

by wales

HTML

<form>
    <div id="container">
      <div class="nested-form">
        <p><input type="text" name="basic_attributes[0][text]" id="basic_attributes_0_text"></p>
        <p><textarea name="basic_attributes[0][textarea]" id="basic_attributes_0_textarea"></textarea></p>
        <p>
          <select name="basic_attributes[0][select]" id="basic_attributes_0_select">
            <option value=""></option>
            <option value="opt1">opt1</option>
            <option value="opt2" selected="selected">opt2</option>
          </select>
        </p>
        <p>
          <input type="hidden" value="" name="basic_attributes[0][radio]">
          <input type="radio" value="1" name="basic_attributes[0][radio]" id="basic_attributes_0_radio_1">
          <label for="basic_attributes_0_radio_1">radio1</label>
          <input type="radio" value="2" name="basic_attributes[0][radio]" id="basic_attributes_0_radio_2" checked="checked">
          <label for="basic_attributes_0_radio_2">radio2</label>
        </p>
        <p>
          <input type="hidden" value="0" name="basic_attributes[0][checkbox]">
          <input type="checkbox" value="1" name="basic_attributes[0][checkbox]" id="basic_attributes_0_checkbox" checked="checked">
          <label for="basic_attributes_0_checkbox">Checkbox</label>
        </p>
        <input type="hidden" value="999" name="basic_attributes[0][id]" id="basic_attributes_0_id">
      </div>
    </div>
    <input type="button" value="Add" id="add">
  </form>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

!function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/dist",n(n.s=1)}([function(t,e){t.exports=jQuery},function(t,e,n){"use strict";n.r(e);var o=n(0),i=n.n(o),r="nested-form";function a(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}var s=function(){function t(e,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.options=n,this.$forms=e,this.pkRegexps=this.options.associationNames.map((function(t){return new RegExp("".concat(t,"_\\d+_id$"))}))}var e,n,o;return e=t,(n=[{key:"build",value:function(){var t=this.$forms.last().clone(this.options.cloneEvents,this.options.cloneEvents);return this.removePkFields(t),this.initFields(t),this.checkFirstRadioButton(t),t.show(),this.options.onBuildTemplate&&this.options.onBuildTemplate(t),t}},{key:"removePkFields",value:function(t){var e=this;t.find('input[id][type="hidden"]').each((function(t,n){var...