Clone jquery mobile input field with data-clear-btn="true"

Question

Using jquery and jquery mobile I try to make a dynamic form. Input fields are created or removed so that always one empty input field is left.

This is my jquery code to achieve this (try it here: http://jsfiddle.net/SR864/17/):

$(document).ready(function() {
    var total = 1;
    // add new field
    $("#bar").on("input", ".input", function() {
        // add new field
        if ($(".input").last().val() != "") {
            var newFields = $(this).closest("p").clone();

            newFields.find(":input").each(function() {
                var name = $(this).attr('name').replace('-' + (total - 1), '-' + total);
                var id = 'id_' + name;
                $(this).attr({'name': name, 'id': id}).val('');

                total++;
            });
            $(this).closest("p").after(newFields);
        }
    });
    $("#bar").on("input", ".input", function() {
        // remove empty field
        if ($(this).val() == "") {
            $(this).closest("p").remove();
        }
    });
});

I also would like to have "delete-buttons" inside of the input fields to remove the text from the input fields. jquery mobile provides data-clear-btn="true" for that. However, somehow the behavior of data-clear-btn="true" only works for the first input field - the new (cloned) ones don't get the clear button.

Question
How can I have the clear-buttons for the cloned input fields?

Bonus question
What is necessary to have input fields deleted when they are empty after the clear button is pressed?

Answer 1

jQM wraps input fields in a div ui-input-text. You need to clone input itself - not the wrapping div - change its' id, name, val()...etc. Then add it to form and enhance it using .textinput() function.

Moreover, you should wrap code in pagecreate event.

$(document).on("pagecreate", function () {
    var counter = 0;
    $("#bar").on("input", function (e) {
        if ($(e.target).val().length === 1) { /* after 2 characters add a new input */
            counter++;
            var id = "input-" + counter;
            var input = $(e.target).clone().prop({
                id: id,
                name: id
            }).val("");
            $(e.target).closest(".ui-input-text").after(input);
            $("#" + id).textinput();
        }
    });
});

Demo

Answer 2

I had a check at the problem. By default the cross button (which is an tag) has a class 'ui-input-clear-hidden' which keeps it hidden till you type. Though you are cloning the element after you start typing, the duplicate element also has this class which keeps it hidden (may be cloning is done before the class 'ui-input-clear-hidden' is removed). So I suggest removing the class 'ui-input-clear-hidden' from your cloned object explicitely as shown below.

$("#bar").on("input", ".input", function() {
    // add new field
    if ($(".input").last().val() != "") {
        var newFields = $(this).closest("p").clone();

        newFields.find(":input").each(function() {
            var name = $(this).attr('name').replace('-' + (total - 1), '-' + total);
            var id = 'id_' + name;
            $(this).attr({'name': name, 'id': id}).val('');

            total++;
        });
        $(this).closest("p").after(newFields);
    }

    /* New line Added for Fix*/
    newFields.find('a').removeClass('ui-input-clear-hidden');
});