JavaScript- как создать динамически несколько div с полем ввода

Question

Я должен создать 3 текстовых поля для ввода пользовательских данных об именах и адресах электронной почты. Я должен создать его динамически, то есть когда пользователь нажимает на поле ввода электронной почты новую строку всех трех элементов, которые должны быть созданы. Это код для одной строки с 3 входами:

<div class='row' id="inputcontainer">
        <div class="form-group clearfix" >
            <div class="col-md-2 col-md-offset-2">
                <div class="form-text-field first-name">
                    <label>First name</label>
                    <input type="text" id="firstName10" class="signup-input" name="" placeholder="">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-text-field last-name">
                    <label>Last name</label>
                    <input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-text-field email">
                    <div>
                    <label>Email</label>
                    <input type="text" data-index="0" id="inputMail0" class="signup-input text-value " name="email[0]"  placeholder="e.g. [e-mail]"/>
                    <span class="common-sprite disNone sign-up-cross first"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

Как создать это динамически?

Я использую следующий код для клонирования, и он клонирует его несколько раз вместо 1

maxIndex = 0;
$('form').on('input','.email',function(){

    $(this).parent().find('.common-sprite').removeClass('disNone');
    var lastmail = $(this);                                                                                  if(($(this).val().length > 0)&&(lastmail.data('index') == maxIndex)) {
        var count = $('.row.inputcontainer').length;
        console.log(count);
        maxIndex++;
        var clone = $('#template').clone(true).attr('id', '');
        clone.find('.firstName[id=firstName'+(maxIndex-1)+']').attr('id', 'firstName' + maxIndex).attr('name', 'first[' + maxIndex +']').addClass('signup-input firstName').val('');
        clone.find('.lastName[id=lastName'+(maxIndex-1)+']').attr('id', 'lastName' + maxIndex).attr('name', 'last[' + maxIndex +']').addClass('signup-input lastName').val('');
        clone.find('.email[id=inputMail'+(maxIndex-1)+']').attr('id', 'inputMail' + maxIndex).attr('name', 'email[' + maxIndex +']').data('index', maxIndex).addClass('signup-input text-value email').val('');
        $('.inputcontainer').append(clone);
    }

Answer 1

Что -то вроде этого? я использовал .blur() активировать динамическое добавление, чтобы, если вы введете что-то в поле ввода электронной почты и нажмете за его пределами, появятся следующие 3 строки информации. я также добавил несколько классов, чтобы помочь jquery быстрее и надежнее находить элементы. я использовал clone() каждый раз воссоздавать одну и ту же структуру из 3 строк.

$(document).ready(function() {
    $('.email').on('blur', function() {
        if($(this).val().length > 0) {
            var count = $('.row').length;
            console.log(count);
            var clone = $('#template').clone(true).attr('id', '');
            clone.find('.firstName').attr('id', 'firstName' + count).val('');
            clone.find('.lastName').attr('id', 'lastName' + count).val('');
            clone.find('.email').attr('id', 'inputMail' + count).val('');
            $('body').append(clone);
        }         
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row inputcontainer' id="template">
    <div class="form-group clearfix" >
        <div class="col-md-2 col-md-offset-2">
            <div class="form-text-field first-name">
                <label>First name</label>
                <input type="text" id="firstName0" class="signup-input firstName" name="" placeholder=""/>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-text-field last-name">
                <label>Last name</label>
                <input type="text" id="lastName0" class="signup-input lastName" name="" placeholder="optional"/>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-text-field email">
                <div>
                    <label>Email</label>
                    <input type="text" data-index="0" id="inputMail0" class="signup-input text-value email" name="email[0]"  placeholder="e.g. [e-mail]"/>
                    <span class="common-sprite disNone sign-up-cross first"></span>
                </div>
            </div>
        </div>
    </div>
</div>

надеюсь это поможет!

Answer 2

Это похоже на то, что вы хотели бы?

$(document).on("blur",".add",function()
{   
    $("#inputcontainer").append("<br />");
    $("#inputcontainer").append("First Name <input type='text' class='signup-input' name='' placeholder='' /><br />");
    $("#inputcontainer").append("last Name <input type='text' class='signup-input' name='' placeholder='optional' /><br />");
    $("#inputcontainer").append("Email Address <input type='text' data-index='0' class='signup-input text-value add' name='email[0]'  placeholder='e.g. [e-mail]' /><br />");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row' id="inputcontainer">
        <div class="form-group clearfix t" >
            <div class="col-md-2 col-md-offset-2">
                <div class="form-text-field first-name">
                    <label>First name</label>
                    <input type="text" id="firstName10" class="signup-input" name="" placeholder="">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-text-field last-name">
                    <label>Last name</label>
                    <input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-text-field email">
                    <div>
                    <label>Email</label>
                    <input type="text" data-index="0" id="inputMail0" class="signup-input text-value add" name="email[0]"  placeholder="e.g. [e-mail]"/>
                    <span class="common-sprite disNone sign-up-cross first"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

Введите в текстовое поле электронной почты, а затем оставить, чтобы создать новые текстовые поля.