I need to dynamically add and remove HTML elements to my product form (attribute addition purpose) and was searching stack overflow. 

I found this solution to be very close (except it does not has a remove option plus I sincerely do not know how to retrieve the data of each textbox, but all this later). 

<https://jsfiddle.net/nzYAW/>

The code in the fiddle works fine. But as I tried it on my local machine it fails to produce any result.

Here is what I did

**index.html**

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <style type="text/css">
        .extraPersonTemplate {display:none;}
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
             $('<div/>', {
                 'class': 'extraPerson',
                 html: GetHtml()
             }).appendTo('#container');
             $('#addRow').click(function () {
                 $('<div/>', {
                     'class': 'extraPerson',
                     html: GetHtml()
                 }).hide().appendTo('#container').slideDown('slow');

             });
         })

         function GetHtml() {
             var len = $('.extraPerson').length;
             var $html = $('.extraPersonTemplate').clone();
             $html.find('[name=firstname]')[0].name = "firstname" + len;
             $html.find('[name=lastname]')[0].name = "lastname" + len;
             $html.find('[name=gender]')[0].name = "gender" + len;
             return $html.html();
         }    
    </script>

</head>

<body>
<div class="extraPersonTemplate">
    <div class="controls controls-row">
        <input class="span3" placeholder="First Name" type="text" name="firstname">
        <input class="span3" placeholder="Last Name" type="text" name="lastname">
        <select class="span2" name="gender">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </div>
</div>
<div id="container"></div>
<a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add another family member</p></a>
</body>
</html>

```

and this is the result

![enter image description here](https://i.stack.imgur.com/TJp9h.png)

Where did I go wrong at copy paste?