Jquery clone method

Hi all,
I want to display a text field with a plus sign next to it. The user can then click the plus sign which duplicates the text field on a new line with another plus sign. The user can then continue doing this.

Ive had an initial stab at the code, and it clones the first text field fine, but when you click on the second plus sign, it creates 2 more text fields, and then clicking on one of the new plus signs creates 4 new text fields, the next one creates 8 new text fields etc…!

How can I have this so only one text field is created each time the plus sign is clicked.

My code is:

js:


$(document).ready(function() { 
         $(".add-but").click(function () {
            $('.single-code').first().clone(true).attr('class','single-code').insertAfter(".single-code").last();      
        });
      });

html:

<div class="single-code">
<div class="controls">
<input type="text"><a href="#" class="add-but"><img src="img/add.png" width="16" height="16"></a>
</div>
</div>

You could create a container div for all of the clones and just keep appending new elements to this.

<!DOCTYPE html>
  <html>
    <head>
    <title>Title</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  </head>

  <body>
    <div id="master">
      <div><input type="text"><a href="#" class="add-but"><img src="img/add.png" width="16" height="16"></a></div>
    </div>
    <div class="clones"></div>

    <script>
      $(document).ready(function() {
        $(".add-but").live('click', function () {
          $(".clones").append($("#master").html());
        });
      });
    </script>
  </body>
</html>

Thats great Pullo - thanks!