Question

The HTML

<div class="repeatable">
  <a href="#" class="more">More</a>
  <fieldset class="intro_clergy_">
      <label>Title</label>
      <input class="title_" type="text" name="intro_clergy_title_1" /><br />

      <label>Name</label>
      <input class="name_" type="text" name="intro_clergy_name_1" />
  </fieldset>
</div>

The jQuery

$('.repeatable').each(function(){
    var group = this;

    var nameStructure = $(" > fieldset", group).attr("class");

    $(" > .more", this).click(function(){
        $(" > fieldset", group).clone().appendTo(group).children().attr("name", nameStructure + $(this).attr("class") + "1");
        return false;
    })


})

So what I am trying to do is whenever anyone clicks the “More” button, it adds a new field. I have it working except for that I need to take the class name of fieldset and the input and insert as the input name. If you look at what I tried to do, you would know that I got intro_clergy_more, because this is actually the more link. I need help trying to figure out how I can specifically call the input.

Answer 1

Are you looking for this?

$('.repeatable').each(function(){
    var group = this;

    var nameStructure = $(" > fieldset", group).attr("class");

    $(" > .more", this).click(function(){
        $(" > fieldset", group).clone().appendTo(group)
            .children("input").each(function(){
                $(this).attr("name", nameStructure + $(this).attr("class") + "1");
            })
        return false;
    })
})