I apologize for the wordy title but I haven't found a solution to my problem yet. I am a newbie with jQuery and web development so any guidance would be appreciated.

I have a `<input>` that allows user to enter a value (number) of how many rows of a set of input fields they want populated. Here's my example:

```
<div id="form">
<input id="num" name="num" type="text" />
</div>

<p>&nbsp;</p>

<div id="form2">
<form action="" method="post" class="form_main">
    <div class="data">
        <div class="item">
            <input id="name" name="name[]" type="text" placeholder="name" /><br/>
            <input id="age" name="age[]" type="text" placeholder="age" /><br/>
            <input id="city" name="city[]" type="text" placeholder="city" /><br/>
            <hr />
        </div>
    </div>
    <button type="submit" name="submit">Submit</button>
</form>

```

My jQuery:

```
<script>
var itemNum = 1;
$("#num").on("change", function() {
    var count = this.value; 
    var item = $(".item").parent().html();
    //item.attr('id', 'item' + itemNum);

    for(var i = 2; i <= count; i++) {
        itemNum++;
        $(".data").append(item);            
    }
})
</script>

```

I'm having problems adding an ID `item+itemNum` increment to `<div class="item">`... `item.attr()` didn't work. It doesn't append once I added that line of code.

Also, how can I get it so that once a user enters a number that populates rows of input fields, that if they change that number it will populate that exact number instead of adding to the already populated rows? Sorry if this doesn't make any sense. Please help!