Question

<div class="input url required addnew" id="ConfigurationValues">
  <label>Bigblue</label>
  <input name="data[Configuration][value][]" value="cool" type="text">
  <input name="data[Configuration][value][]" value="awesome" type="text">
  <input name="data[Configuration][value][]" value="neat" type="text">
  <div class="actions" style="padding-left:0px;">
    <a onclick="return FALSE;" href="#" id="AddNew">Add</a>
  </div>                                        
</div>

I would like to replicate/clone the input. I have the below code that works for text.

$('a.AddNew').click(function(){
    var pool = $(this).closest('.addnew');
    pool.find('input[type=text]:first').clone().val('').insertAfter(pool.find("input[type=text]:last"));
    return false
})

Now i want to write generalized code the takes care of type=url,email,tel,number and select tag.

In the above code line 3-6 will change as folows

<input name="data[Configuration][value][]" value="neat" type="url">

or

<input name="data[Configuration][value][]" value="neat" type="tel">

or

<select></select>

Answer 1

Do you mean something like this:

function cloneElement(selector) {
  $('a.AddNew').click(function(){
    var pool = $(this).closest('.addnew');
    var inputs = pool.find(selector);
    inputs.first().clone().val('').insertAfter(inputs.last());
    return false;
  });
}

function cloneInput(type) {
  return cloneElement('input[type=' + type + ']');
}

function cloneSelect() {
  return cloneElement('select');
}

EDIT: Ok, what about:

  $('a.AddNew').click(function(){
    var pool = $(this).closest('.addnew');
    var inputs = pool.find("input, select");
    inputs.first().clone().val('').insertAfter(inputs.last());
    return false;
  });