Jquery. how we show a same div for multiple times step by step not once when my condition is true

Question

i have a div with two input fields, i want to show this div again when both fields are filled using jquery. this same div with both fileds show for next data. this process continuous until condition not false.

 $(document).ready(function () { $('input').blur(function () { var input1 = $("#med").val(); var input1 = $("#med").val(); var input2 = $("#pon").val(); if (input1 != '' && input2 != '') { $("medicine_fields").show(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="btn-group form-inline" id="medicine_fields"> <label>Medicine</label> <input type="text" list="medicines" id="med" name="medicines" class="form-control" /> <datalist id="medicines"> <option value="">--select or write--</option> <option value="abc">abc</option> <option value="abc">dec</option> </datalist> <label style="margin-left:20px">Potency</label> <input type="text" list="potency" id="pon" class="form-control" /> <datalist id="potency"> <option value="">--select or write--</option> <option value="abc">abc</option> </datalist> </div> 

Answer 1

Use the jQuery clone(true) function together with append() . The true parameter clones the added functions too. Please note that you cannot use id="" in that case because id needs to be unique.

 $('.med, .pon').blur (function () { //get input-values var input1 = $(this).parent ().find ('.med').val (); var input2 = $(this).parent ().find ('.pon').val (); //check if both values not empty if (input1 != '' && input2 != '') { //clone div and reset inputs. var new_div = $(this).parent ().clone (true); new_div.find ('.med').val (''); new_div.find ('.pon').val (''); //append clone to body $('body').append (new_div); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="btn-group form-inline medicine_fields"> <label>Medicine</label> <input type="text" list="medicines" name="medicines" class="form-control med" /> <datalist id="medicines"> <option value="">--select or write--</option> <option value="abc">abc</option> <option value="abc">dec</option> </datalist> <label style="margin-left:20px">Potency</label> <input type="text" list="potency" class="form-control pon" /> <datalist id="potency"> <option value="">--select or write--</option> <option value="abc">abc</option> </datalist> </div> 

Answer 2

Change the id's of the inputs to class="" so you can have multiple of them on the same page. Bind the event listener to the document (or some parent element that will wrap all fields). And use the JavaScript below:

$(document).on('blur', '.med, .pon', function(e) {
    var triggerParent = $(this).closest('[id^="medicine_fields"]'),
        input1 = triggerParent.find(".med").val(),
        input2 = triggerParent.find(".pon").val();

    if(input1 != '' && input2 != ''){
        var parent = $(this).parents('form'), // change this to the wrapping element where the new fields should be.
            count = parent.find('[id^="medicine_fields"]').length,
            html = $("#medicine_fields").clone().attr('id', 'medicine_fields_'+(count+1));

        html.find('datalist, input').val(''); // reset values
        parent.append(html);

    }
});