AJAX在一次提交中发布来自克隆表单的数据

我在一个"推荐朋友"页面提交多个表单。最初只有2个表格，一个给推荐人，一个给推荐人。用户可以通过点击clone()作为推荐表单的加号来"添加"更多推荐表单，并将其附加到容器中。

<div class="form-wrap">
  <form id="referrer-form" role="form" action="<?=$_SERVER['REQUEST_URI'];?>" method="post" >
    inputs...
  </form>
  <form id="first-ref" class="referral-form" role="form" action="<?=$_SERVER['REQUEST_URI'];?>" method="post">
    inputs...
  </form>
</div>
<div class="buttons">
  <a id="plus" class="btn btn-primary" href=""></a>
  <a id="minus" class="btn btn-danger" href=""></a>
  <button id="submit" class="btn btn-warning btn-lg form-control">SUBMIT</button>
</div>

使用我当前的jQuery，这两个表单加载了页面标记后就可以了。然而，那些已经克隆()d不张贴。所有的属性都是一样的

//每个表单的AJAX post

    var form = $('form');
    $("#submit").click(function () {
        $('#referrer', '#referrer-form').val('what is posted to leadsource field');
        $(form).each(function () {
            if ($(this).attr("id") != "referrer-form") {
                $('#referrer', this).val('Referred by: ' + $('#referrer-form #name').val());
            }
            var formData = $(this).serialize();
            $.ajax({
                type: 'POST',
                url: $(form).attr('action'),
                data: formData
            });
        });
        alert("form submitted");
        $('form input').val('');
    });
    $("#plus").click(function () {
        $("#first-ref").clone().appendTo(".form-wrap");
        $(".referral-form").last().attr('id', '');
        $(".referral-form").last().find('input').val('');
        load_phoneMask_js();
    });
    $("#minus").click(function () {
        $(".referral-form").last().remove();
    });
</script>