Add TextBox dynamically to webpage using jQuery

Question

I am trying to add a textbox to a webpage in ASP.NET MVC using jQuery. I have a button which when clicked, I want a TB to be added to the end of a collection of Textboxes of a given class. Here is my jQuery code for adding a textbox.

$(document).ready(function () {

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

    var count = $('input:text .approvers').length;

    if (count <= 20) {

        var newTextBox = $(document.createElement('text'));

        newTextBox.appendTo('.approvers:last');
    }
});

});

Here is the button I have created in an MVC View

 <input type="button" value="+" id="addTextBox" class="roundButton" />

This however isn't working. Its defined in an external JS file. I have researched and made sure jQuery is added first before my own JS file. What have I missed out.

PS: I added a breakpoint at the start of the jQuery function and it gave me this warning when I debugged The breakpoint will not currently be hit. No symbols have been loaded for this document I am working on solving that but am not sure that may be the problem.

Answer 1

Try changing:

var newTextBox = $(document.createElement('text'));

newTextBox.appendTo('.approvers:last');

to:

$('.approvers:last').append($("<input type='text' value='value' />"))

update:
Another error is var count = $('input:text .approvers').length; ?
change it to : var count = $('input[type='text'].approvers').length ;