Add text box in a new row and in two different columns

I have found a script to add text box to the window using button. But problem is the logic used to add text boxes is using div. Using div tag increases the page length as it uses a lot of blank space. Please help me with the script such that I can add text boxes in the tabular form that is in the tr & td tags.

PHP page script.

<td开发者_开发百科 COLSPAN="3"><DIV id='TextBoxesGroup'><DIV id="TextBoxDiv1"><LABEL>Track #1 : </LABEL>
<input name="textbox1[]" type='text' size="60" id='textbox11' >
<input name="textbox2[]" type='text' size="35" id='textbox21' >
</DIV></DIV></td>

Javascript..

    $(document).ready(function(){
var counter = 2;

$("#addButton").click(function () {
if(counter>25){
alert("Only 25 textboxes allow");
return false;
}   
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html('<label>Track #'+ counter + ' : </label>' +
'<input name="textbox1[]" size="60" type="text" id="textbox1' + counter + '">' + '&nbsp;'+  '<input name="textbox2[]" size="35" type="text" id="textbox2' + counter + '">' );

newTextBoxDiv.appendTo("#TextBoxesGroup");


counter++;
});

$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}   

counter--;

$("#TextBoxDiv" + counter).remove();

});

$("#getButtonValue").click(function () {

var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});

Well, you could just remove the part of the code that creates the divs.

newdiv = $('<label>Track #'+ counter + ' : </label>' + '<input name="textbox1[]" size="60" type="text" id="textbox1' + counter + '">' + '&nbsp;'+  '<input name="textbox2[]" size="35" type="text" id="textbox2' + counter + '">' );
newdiv.appendTo("#TextBoxesGroup");

However, if any of your code depends on the div being present elsewhere, this will not work.

This sounds like this is really more of an HTML question and when you add a div, you aren't getting the formatting you want. A DIV is (by default) a block object which starts a new line. I can't really tell what exactly you want the result to be, but if you want an inline object, you can use a SPAN instead. You would change this line:

var newTextBoxDiv = $(document.createElement('div'))

to this:

var newTextBoxDiv = $(document.createElement('span'))

Also, if you want the new checkbox to be added to the same container that has your current checkboxes in it, then you may want to change this:

newTextBoxDiv.appendTo("#TextBoxesGroup");

to this:

newTextBoxDiv.appendTo("#TextBoxDiv1");

Further help will lkely require more of an explanation of the finished formatting you are trying to achieve.