jQuery addClass example

Change class name on click in jQuery

by Norlihazmey Ghazali

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <h2>
  Close Friends
  </h2>
  <div class="form-body well well-sm">
    <div class="toClone_example81">
      <div class="form-group">
          <label class="control-label">Name</label>
          <br/>
          <input type="text" name="fullName" class="form-control" value="" />
      </div>
      <div class="form-group">
          <label class="control-label">Age</label>
          <br/>
          <input type="text" name="fullName" class="form-control" value="" />
      </div>
      <div class="form-group">
          <label class="control-label">Gender</label>
          <br/>
          <select name="gener" class="form-control">
              <option value="">--Please Select</option>
              <option value="Female">Female</option>
              <option value="Male">Male</option>
          </select>
      </div>
    </div>
  </div>


  <h2>
  So-So Friends
  </h2>
  <div class="form-body well well-sm">
    <div class="toClone_example82">
      <div class="form-group">
          <label class="control-label">Name</label>
          <br/>
          <input type="text" name="fullName" class="form-control" value="" />
      </div>
      <div class="form-group">
          <label class="control-label">Age</label>
          <br/>
          <input type="text" name="fullName" class="form-control" value="" />
      </div>
      <div class="form-group">
          <label class="control-label">Gender</label>
          <br/>
          <select name="gener" class="form-control">
              <option value="">--Please Select</option>
              <option value="Female">Female</option>
              <option value="Male">Male</option>
          </select>
      </div>
    </div>
  </div>


  <h2>
  Frienimies
  </h2>
  <div class="form-body well well-sm">
    <div class="toClone_example83">
      <div class="form-group">
          <label class="control-label">Name</label>
      ...

JavaScript

/*===================================================================
 | jQuery Metal Clone Plugins 
 |===================================================================
 | http://thunderwide.com 
 |
 | @category   Plugins
 | @author     Norlihazmey <[email protected]>
 | @license    Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 |             and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 | @copyright  (c) 2015 Norlihazmey(metallurgical)
 | @version    1.3.0
 | @Github 	   https://github.com/metallurgical/jquery-metal-clone
 |===================================================================*/

;
(function($) {


    $.fn.metalClone = function(options, callback) {


        opt = cloned = $.extend({}, $.fn.metalClone.defaults, options);
        var base = clonedElement = this;

        return base.each(function(index, elem) {
            // if already defined or register 
            // clone plugin inside current selector
            // then no need to redefined it
            var classOrId = $(elem).attr('id') || $(elem).attr('class');

            if (!classOrId) {
                classOrId = elem;
            }

            if (undefined == $(document).data('metalClone-' + classOrId))
                $(document).data('metalClone-' + classOrId, 'metalClone');
            else
                return;

            // Get the selector
            // To see either class or ids were used
            var typeSelector = base.selector || '.' + classOrId,
                // remove either . or # for class and ID respectively
                newTypeSelector = typeSelector.replace(/^(\.|\#)/, ''),
                nodeType = base[0].nodeName,
                // Capture the configuration options
                currentCopyValue = opt.copyValue,
                currentPosition = opt.position,
                currentNumberToClone = opt.numberToClone,
                currentDestination =...