How to dynamically add new instance (of say a text-field or a checkbox) in Wordpress widgets?

I am creating a Wordpress widget. I want users to enter their phone numbers. By default, the widget should show only one textbox and a link below it that says "Add New". When the user clicks the link, a the second text-box should appear below the first one with a s开发者_运维技巧mall (X) beside it, that will be used to remove it.

This functionality is there in the post editing screen in Wordpress. Users can dynamically "Add new category" there. Can this me implemented inside Widgets?

---

Sure. Start with this HTML at the bottom of your widget:

<h2><a href="#" id="addNew">Add New</a></h2>
<div id="numbers">
    <p>
        <label for="numbers"><input type="text" id="p_number" size="20" name="p_number" value="" placeholder="Input Number" /></label>
    </p>
</div>

Now a little jQuery:

$(function() {
        var nmbrsDiv = $('#numbers');
        var i = $('#numbers p').size() + 1;

        $('#addNew').live('click', function() {
                $('<p><label for="numbers"><input type="text" id="p_number_' + i +'" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Number" /></label> <a href="#" id="remNew">Remove</a></p>').appendTo(nmbrsDiv);
                i++;
                return false;
        });

        $('#remNew').live('click', function() {
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});