Cloning experiment - Numbered Children

A button clones a sample field set and renumbers the clone's child fields based upon the the numbers used in the last field set.

by Brian Layman

HTML

<button onclick="addFS()">
add field set</button>
<fieldset id="fs_headline" class='fs' style="display: none">
<legend>Headline</legend>
<label for="_pos">Pos: </label><br><input type="text" autofocus="" required="" maxlength="5" size="55" class="_pos hh_pos" id="_pos" name="_pos" value=""><br>
<label for="_headline_url">Enter an URL: </label><br><input type="text" autofocus="" required="" maxlength="250" size="110" class="_headline_url hh_headline_url" id="_headline_url" name="_headline_url" value="" onchange="populate_from_url(this.value, '#_headline_title', '#_headline_source')"><br>
<label for="_headline_title">Customized Title: </label><br><input type="text" autofocus="" required="" maxlength="250" size="110" class="_headline_title hh_headline_title" id="_headline_title" name="_headline_title" value=""><br>
<label for="_headline_source">Source: </label><br><input type="text" autofocus="" required="" maxlength="250" size="110" class="_headline_source hh_headline_source" id="_headline_source" name="_headline_source" value=""><br>
<label for="_pinnable">Turn this into a pinnable Article </label><br><input type="checkbox" autofocus="" required="" class="_pinnable hh_pinnable" id="_pinnable" name="_pinnable" value=""><br>
<button onclick="delete_headline(1)">Delete This Headline</button></fieldset>

<fieldset id="fs_headline_1" data-count = "1" class='fs'>
<legend>Headline</legend>
<label for="hh_1_pos">Pos: </label><br><input type="text" autofocus="" required="" maxlength="5" size="55" class="hh_1_pos hh_pos" id="hh_1_pos" name="hh_1_pos" value=""><br>
<label for="hh_1_headline_url">Enter an URL: </label><br><input type="text" autofocus="" required="" maxlength="250" size="110" class="hh_1_headline_url hh_headline_url" id="hh_1_headline_url" name="hh_1_headline_url" value="" onchange="populate_from_url(this.value, '#hh_1_headline_title', '#hh_1_headline_source')"><br>
<label for="hh_1_headline_title">Customized Title: </label><br><input type="text" autofocus=""...

JavaScript

function addFS() {
  var highestCount = Number( jQuery('.fs').last().attr("data-count") );
	jQuery("#fs_headline").fieldsManage( highestCount + 1 );
}

jQuery.fn.fieldsManage = function (num) {
    var ele = $(this);
    var eleID = ele.attr("id");
	  var lastID = "#fs_headline_"+(num-1);
    var clone;
    
    clone = ele.clone(false);
    var id = eleID + '_' + num;
    clone.attr("id", id);
    clone.attr("data-count", num);
    clone.toggle(true);
		clone.children().each(function () {    
	    var childID = jQuery(this).attr("id");
      if (childID > '') {
  	  	jQuery(this).attr("id",  'hh_'  + num + childID);
  	  	jQuery(this).attr("name",  'hh_'  + num + childID);
      }
		});
	jQuery(lastID).after(clone);
}