javascript - jqueryで入力テキストフィールドを動的に作成すると、フィールドが重複する

Question

入力テキスト フィールドを動的に作成する以下のコードを自分のサイトに統合しようとしています。

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

    $('#addScnt').live('click', function() {
        $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
    });

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

これは、重複する入力フィールドを作成することを除いて機能します。削除すると、重複は作成されないため、以下の関数 jQuery(function($) と関係があると思います。

以下のコードでこれを引き起こしているのは何ですか？

jQuery(function($){

    var jcrop_api;

    $('#target').Jcrop({
        onChange:   showCoords,
        onSelect:   showCoords,
        onRelease:  clearCoords
    }, function() {
        jcrop_api = this;
    });

    $('#coords').on('change','input',function(e) {
        var x1 = $('#x1').val(),
            x2 = $('#x2').val(),
            y1 = $('#y1').val(),
            y2 = $('#y2').val();

        jcrop_api.setSelect([x1,y1,x2,y2]);
    });
});

function showCoords(c) {
    $('#x1').val(c.x);
    $('#y1').val(c.y);
    $('#x2').val(c.x2);
    $('#y2').val(c.y2);
    $('#w').val(c.w);
    $('#h').val(c.h);
};

function clearCoords() {
    $('#coords input').val('');
};