add remove <li with textbox on button click. (out of ul wrap problem) and name inputs uniquely

I have an issue with js. I have form like below. Add button is a开发者_Python百科dding li with input box and Remove button is removing... it is working very well. the issue is, it is creating the li after ul, out of ul :/ you can see it clearly at the screenshot below. any idea about solution? appreciate!!! thanks!!!

*

ps, how can I name the created inputs unique? now all has same name which is txt :/

*

JS CODE

function addTextBox() {
    var form = document.contact;
    form.appendChild(document.createElement('li')).innerHTML = "Name <input type=\"text\" name=\"txt\" class=\"txt_input required\">";
}

HTML CODE:

                        <li id="persons_add"><label for="persons"># of Persons Attending: *</label>

                    <table width="40%" border="1">
                        <tr>
                            <td><input type="text" name="count" value="0" class="txt_input required" style="width:20px;"  readonly ></td>
                            <td><INPUT type="button" value="ADD" name="add" onClick="incrementCount()"></td>
                            <td><INPUT type="button" value="Remove" name="remove" onClick="decCount()"></td>
                        </tr>
                    </table>

                    </li>
                    <li class="alignRight"><input type="submit" value="Register" id="btnsend" name="btnsend" class="btn_submit" /></li>
                </ul>

SCREENSHOT of issue

alt text http://xs1144.xs.to/xs1144/09434/buuu851.jpg

You need to append the new li to the ul, not the form element.

var ul = document.getElementById("ul_id");
ul.appendChild(document.createElement('li')).innerHTML = "Name <input type=\"text\" name=\"txt\" class=\"txt_input required\">";

Shouldn't you to append the "li" to the "ul" instead of the form ?

function addTextBox() {
    var myUl = document.getElementById('`___your_ul_id____`'); **<--- change this**
    myUl.appendChild(document.createElement('li')).innerHTML = "Name <input type=\"text\" name=\"txt\" class=\"txt_input required\">";
}

Call appendChild on the UL element, not the form element.