title: Clone form input and clear value
body: <p>I'm trying to create an upload form. It's working well so far and i'm trying to sort out a couple of bugs that I dislike.</p>
  
  <p>The line that I seem to be having trouble with is</p>
  
  <pre><code>$(element).find("&gt;:first-child").attr("value", "");
  </code></pre>
  
  <p>When cloning the form, it clones the div and replaces the value with nothing leaving a blank form, this works well, if I were to delete that line I would get the previous form's value, so it would be nice for a blank form to show.</p>
  
  <p>The issue i'm having is when you delete a form all the forms values delete, What I want is when you delete a form, leave the value alone for the other forms.</p>
  
  <p>Here's a fiddle <a href="http://jsfiddle.net/d77pd/1/" rel="nofollow">http://jsfiddle.net/d77pd/1/</a> or see code below</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;button class="clone"&gt;Add an Image&lt;/button&gt;
  &lt;div id="upload_image_sets"&gt;
      &lt;div id="clonedInput1" class="clonedInput"&gt;
          &lt;input type="text" id="upload_image_link_1" class="image" size="36" name="hero_options[upload_image_link_1]" value="' . $hero_options['upload_image_link_1'] . '" /&gt;
          &lt;input id="show_upload_image_link_button_1" class="button upload_images" type="button" value="Upload Image" /&gt;
          &lt;button class="remove"&gt;Remove&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>function updateClonedInput(index, element) {
      $(element).appendTo("#upload_image_sets").attr("id", "clonedInput" + index);
      $(element).find("&gt;:first-child").attr("id", "cs_product_menu_img_src_" + index);
      $(element).find("&gt;:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
      $(element).find("&gt;:first-child").attr("value", "");
      $(element).find("&gt;:first-child").next().attr("id", "cs_product_menu_img_src_" + index + "_button");
      displayRemove();
  }
  
  function displayRemove() {
      if ($('.clonedInput').length === 1) {
          $('.remove').hide();
      } else {
          $('.remove').show();
      }
  }
  displayRemove();
  
  $(document).on("click", ".clone", function (e) {
      e.preventDefault();
      var cloneIndex = $(".clonedInput").length + 1;
      var new_Input = $(this).closest('.clonedInput').length ? $(this).closest('.clonedInput').clone() : $(".clonedInput:last").clone();
      updateClonedInput(cloneIndex, new_Input);
  });
  $(document).on("click", ".remove", function (e) {
      e.preventDefault();
      $(this).parents(".clonedInput").remove();
      $(".clonedInput").each(function (cloneIndex, clonedElement) {
          updateClonedInput(cloneIndex + 1, clonedElement);
      })
  });
  </code></pre>
  
  <p>Clone the form a few times, if you delete any form apart form the 1st one with the content, you'll notice the first form's content deletes, I want this left alone.</p>