We Keep Coding

Create dynamic input in dynamic form when I select an option

I am trying to create a dynamic form that adds another field when choosing Verification select, the problem is that when I add fields of options in Verification at the time of adding another form, the options that I previously added appear, as I do to add a new form and don't show added options? I appreciate your help thanks!
$(document).ready(function() {
$('.verificar-free').hide();
$('.duplicate-free').hide();
$('.optionRow').hide();
var count = 2;
//duplicate
$('a.add-free').on('click', function() {
//clone
var row = $('.duplicate-free').clone();
$(row).insertAfter('.aditional-box-free');
$(row).show();
//add new ids
$(row).find('select').attr('id', 'select-free_' + count);
//remove duplicate class
$(row).removeClass('duplicate-free');
//onchange of select
$('select').on('change', function() {
var value = $(this).val();
var select = $(this).parent();
if (value == 1) {
$(select).siblings('.input-free').show();
$(select).siblings('.ocultar-free').hide();
} else {
$(select).siblings('.input-free').hide();
}
if (value == 2) {
$(select).siblings('.ocultar-free').show();
$(select).siblings('.verificar-free').show();
} else {
$(select).siblings('.verificar-free').hide();
}
});
//add option
$(".addRow-free").click(function() {
var html = "<div class='option-free' id='" + count + "'><div class='form-group'><div class='input-group select'><input type='text' class='form-control' placeholder='Añade opción' /><span class='input-group-btn'><button class='btn btn-primary remove-option' type='button'><a class='remove-tipe' href='javascript: void(0)'><span class='glyphicon glyphicon-trash' style='color:white'></span></a></button></span></div></div></div>";
var form = $(html);
$(this).closest(".verificar-free").find(".optionRow-free").append(form);
});
count++;
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="aditional-questions text">
<div class="aditional-box-free">
<p class="aditional-text" for=""><b>Add Question</b>
<a class="btn btn-primary agregar add-free" href="javascript: void(0)" type="button"><span></span>Add</a>
</p>
</div>
<div class="duplicate-free all-free" style="text-align: center">
<div class="box-question">
<div class="row">
<label class="type-question-text" for="">Question Type</label>
<div class="col-md-12">
<select class="form-control select">
<option value="1">Text</option>
<option value="2">Verification</option>
</select>
</div>
<div class="row ocultar-free">
<div class="col-md-12">
<label class="type-question-text" for="">Title</label>
<div class="form-group">
<input type="text" id="" class="form-control text general" placeholder="Question">
</div>
</div>
</div>
<!--aditional option-->
<div class="row verificar-free">
<div class="text">
<div class="col-md-6">
</div>
</div>
<div class="text option text" style="margin-top:10px;">
<a class="btn btn-primary addRow-free" href="javascript: void(0)" type="button"><span></span>Add Option</a>
</div>
<br>
<div class="form-group optionRow-free">
</div>
</div>
</div>
<br>
</div>
</div>
</div>

If I'm not wrong with your question.
The problem is you got same(duplicate) added input right? (If more than 1 question)
Change this line
$(".optionRow-free").append(form);
To
$(this).closest(".verificar-free").find(".optionRow-free").append(form);

Data Form reset is not happening

Written code to save the data and reset the data. In this case data is saving successfully but unable to make reset the form. When i click on pencil icon it turn to floppy disk and remove icon. If i click on floppy disk data is saving but when i click on remove icon data form is not being reset. I tried code this way
//Banking details form validation
$(document).ready(function() {
$('.editBankDetailBtn').click(function() {
if ($('.editBankDetail').is('[readonly]')) { //checks if it is already on readonly mode
$('.editBankDetail').prop('readonly', false); //turns the readonly off
$('.editBankDetailBtn').html(
'<span class="glyphicon glyphicon-floppy-disk"> </span>' +
'<span id="reset-form" class="glyphicon glyphicon-remove"> </span>');
// $('.glyphicon-remove')[0].reset();
} else { //else we do other things
var patt = /^([0-9]{11})|([0-9]{2}-[0-9]{3}-[0-9]{6})$/;
var reg = /^[A-Za-z]{4}[0-9]{6,7}$/;
patt.test('acdbdfdsfsf22-333-666666'); // true
var bname_1 = document.getElementById('name').value;
if (bname_1 == "") {
document.getElementById('name').style.borderColor = "red";
return false;
} else {
document.getElementById('name').style.borderColor = "#cccccc";
}
$('.editBankDetail').prop('readonly', true);
$('.editBankDetailBtn').html(
'<span class="glyphicon glyphicon-pencil"> </span>');
$('.glyphicon-remove').on('click', function() {
$("#reset-form").trigger("reset");
});
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading" style="background-color: #b3daff;">
<h4 class="panel-title">
<span style="font-weight: 700;">Banking Details</span> <a class="editBankDetailBtn"><span
class="glyphicon glyphicon-pencil"> </span></a>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> <span class="glyphicon glyphicon-plus" id="pls" style="color: darkred"> </span>
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-sm-4 col-md-6">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-8">Bank
Name<span style="color: red;">*</span>
</label>
<div class="col-md-12">
<input type="text" class="form-control editBankDetail" id="bankName" readonly placeholder="Bank Name" />
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-md-6">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-8">Account
Number<span style="color: red;">*</span>
</label>
<div class="col-md-12">
<input type="text" class="form-control editBankDetail" id="accountNumber" readonly placeholder="Account Number" />
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-md-6">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-8">IFSC
CODE<span style="color: red;">*</span>
</label>
<div class="col-md-12">
<input type="text" class="form-control editBankDetail" id="ifscCode" readonly placeholder="IFSC CODE" />
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-md-12">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-8">Bank
Address<span style="color: red;">*</span>
</label>
<div class="col-md-12">
<textarea class="form-control editBankDetail" id="branchAddress" placeholder="Bank Address" readonly> </textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!----Ends second column-------->
</div>
</div>
<!----Ends accordion column-------->
</div>

You have several things
You need to reset a form, not an icon like you do now
PLEASE have a toggleClass on the bankName - it is not name, but bankName in your code
You need to delegate - something like this - the element that gets the event handler has to be static in the page and exist at the time of delegation, here $('.editBankDetailBtn')
$('.editBankDetailBtn').on('click', '.glyphicon-remove', function() {
$("#myForm")[0].reset()
});

Your click will not work on the ones created dynamically. Add below code
$(document).on('click', '.glyphicon-remove', function() {
// Put one alert or console to check that you here
$("#YOU_FORM_ID")[0].reset(); //
});

How to toggle a class of an input if it's not empty with jQuery?

Using Bootstrap 4.
I have four text inputs, if any of the text inputs contain any values, i'd like to add a class to a button.
When the button is clicked, I would like to clear the input values, and remove the class from the button.
I have half of it working (clicking button successfully clears all inputs).
My code is below;
$(document).ready(function() {
$("#filterRecords input").on("keyup change", function() {
$("#filterRecords input").each(function() {
var element = $(this);
if (element.val().length > 0) {
$('#resetFilter').addClass('btn-outline-primary');
}
});
});
$('#resetFilter').click(function() {
$('input[type=text]').val('').change();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row filterRecords">
<div class="input-group col-xs-6 col-sm-6 col-md-3 mb-3">
<input type="text" id="searchName" class="form-control" placeholder="Search Name">
</div>
<div class="input-group col-sm-6 col-md-3 mb-3">
<input type="text" id="searchLang" class="form-control" placeholder="Search Language">
</div>
<div class="input-group col-sm-6 col-md-3 mb-3">
<input type="text" id="yearMin" class="form-control start" placeholder="Search Start Year">
</div>
<div class="input-group col-sm-6 col-md-3 mb-3">
<input type="text" id="yearMax" class="form-control end" placeholder="Search End Year">
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-auto">
<button class="btn btn-sm btn-default" type="button" id="resetFilter">Reset Filters</button>
<hr>
</div>
</div>
Fiddle link.
Any help would be appreciated.

Firstly, filterRecords is a class, not an id, so your selector is incorrect.
Aside from that, the issue with your logic is that it only ever add the class when the input values change. You also need to have some logic to remove it when no input has a value entered.
You can do that by using toggleClass() along with a boolean based on the number of filled inputs, like this:
$(document).ready(function() {
var $inputs = $(".filterRecords input");
$inputs.on("input", function() {
var $filled = $inputs.filter(function() { return this.value.trim().length > 0; });
$('#resetFilter').toggleClass('btn-outline-primary', $filled.length > 0);
});
$('#resetFilter').click(function() {
$inputs.val('').trigger('input');
});
});
.btn-outline-primary {
color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row filterRecords">
<div class="input-group col-xs-6 col-sm-6 col-md-3 mb-3">
<input type="text" id="searchName" class="form-control" placeholder="Search Name">
</div>
<div class="input-group col-sm-6 col-md-3 mb-3">
<input type="text" id="searchLang" class="form-control" placeholder="Search Language">
</div>
<div class="input-group col-sm-6 col-md-3 mb-3">
<input type="text" id="yearMin" class="form-control start" placeholder="Search Start Year">
</div>
<div class="input-group col-sm-6 col-md-3 mb-3">
<input type="text" id="yearMax" class="form-control end" placeholder="Search End Year">
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-auto">
<button class="btn btn-sm btn-default" type="button" id="resetFilter">Reset Filters</button>
<hr>
</div>
</div>
Also note the use of input over the combination of keyup change.

Like this
$(document).ready(function() {
$("#filterRecords input").on("keyup change", function() {
$("#filterRecords input").each(function() {
var element = $(this);
if (element.val().length > 0) {
$('#resetFilter').addClass('btn-outline-primary');
}
});
});
$('#resetFilter').click(function() {
$("#filterRecords**")[0].reset();
$(this).removeClass('btn-outline-primary');
});
});

how to add one or more clone in jquery

I am new in jquery and im using laravel framework. I want to add courses after filling first course by user.
When user click on add more course button.it will create new clone make sure that add more course button will be removed from first course and set to second course and same apply for newly created course and add more button should removed from second course and set to third course . i have hrml code.
enter code here
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="heading">
<h4>Courses Offred <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="display:none">×</button></h4>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Title</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Fees</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Web Link</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Detail</span>
<textarea class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Course Detail"></textarea>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Type</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Duration</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Location</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Entry Requirement</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Certificates</span>
<textarea class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Certificates"></textarea>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="add-more-class ">
<div class="btn-save">
<button class="btn btn-info">Add More Course</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In heading tag there is close button.and it should visible in second course and make validation user can't add more than five course. Can anyone help me. Thanks in advance :)

I think this is the script that you wanted:
Updated script:
var courseCtr = 1;
console.log('course counter: ' + courseCtr);
$(document).on('click', 'button.btn', function() {
if (courseCtr === 5) {
return false;
}
var $row = $(this).closest('div.heading').parent();
var $parent = $row.parent();
var $clone = $row.clone();
if ($clone.find('.heading .close').length === 1) {
$clone.find('.heading .close').remove();
}
$clone.find('.heading h4').after('<button class="close">X</button>')
$clone.find(':input').val('');
$clone.find('textarea').val('');
$row.find('.heading div').last().remove();
// $clone.find('.heading h4').remove();
$parent.append($clone);
courseCtr++;
console.log('course counter: ' + courseCtr);
})
$(document).on('click', '.close', function(){
var $buttonClone = $(this).parent().find('div').last().clone();
$(this).parents('.row').prev().find('div.heading').append($buttonClone);
$(this).parents('.row').remove();
courseCtr--;
console.log('course counter: ' + courseCtr);
})
UPDATED FIDDLE: SEE FIDDLE HERE

I think you need to clean up your html markup a little bit and your work and code will be more easy and understable.
1-seperate Add More Course button from form-content.
2-give proper class to form container.
3-write a simple code and done.
Modified HTML CODE
<div class="col-md-12 col-sm-12 col-xs-12 forms-container">
<div class="row single-form">
<div class="heading">
<h4>Courses Offred</h4>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Title</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Fees</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Web Link</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Detail</span>
<textarea class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Course Detail"></textarea>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Type</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Duration</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Location</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Entry Requirement</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Certificates</span>
<textarea class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Certificates"></textarea>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="alert alert-danger" style="display:none">
Please fill all the fields.
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="add-more-class text-center ">
<button class="btn btn-info add-more-course">Add More Course</button>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="add-more-class ">
<button class="btn btn-info pull-right save-and-continue">Save and continue</button>
</div>
</div>
</div>
</div>
JAVASCRIPT CODE
var count = 0;
$('.add-more-course').click(function() {
if (count < 4) {
/* clone single .single-form container */
var $new_form = $(this).parents('.forms-container').find('.single-form').first().clone(true);
/* clear form data if any field is filled */
$new_form.find('input,textarea').val("");
/* remove heading text and enable close button */
$new_form
.find('.heading h4')
.text("")
.append('<button type="button" class="close">X</button>')
.end()
.find('.alert').css('display','none');
/* append it before add more course button */
$(this).parents('.forms-container').find('.single-form').last().after($new_form)
count++;
}
});
$('.forms-container').on('click', '.single-form .close', function() {
$(this).parents('.single-form').remove();
count--;
});
$('.forms-container').on('click', '.save-and-continue', function(){
var $form_container = $(this).parents('.forms-container'),
is_error = false;
$form_container.find('.single-form').each(function(ind, form){
var $form = $(form);
$form.find('input,textarea').each(function(ind,ele){
if($(ele).val() === "" || $(ele).val() === undefined){
$form.find('.alert').css('display','block');
is_error = true;
return false;
}
});
});
if(!is_error) {
// write ajax call or anything else what you want on success
}
});
I hope it will help you.

you can get help from below code,
jQuery(document).delegate('a.add-record', 'click', function(e) {
e.preventDefault();
var content = jQuery('#sample_table tr'),
size = jQuery('#tbl_posts >tbody >tr').length + 1,
element = null,
element = content.clone();
element.attr('id', 'rec-'+size);
element.find('.delete-record').attr('data-id', size);
element.appendTo('#tbl_posts_body');
element.find('.sn').html(size);
});
on click of add more button you need to create clone of first form of parent div and append with container.
Dynamically Add and Remove rows/html form in a Table Using jquery

How to change id value iterating by class

I have this html:
<div class="info">
<div class="form-group">
<label class="control-label col-sm-2">Title</label>
<div class="col-xs-10 col-sm-8">
<input id="titleInfo" class="form-control" type="text" placeholder="Title">
</div>
<div class="col-xs-1 col-sm-1">
<button class="btn btn-default remove_field"><i class="fa fa-remove"></i></button>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Text</label>
<div class="col-xs-10 col-sm-8">
<textarea id="textInfo" class="form-control" type="text" placeholder="..."></textarea>
</div>
</div>
</div>
Into my jsp I have many of this:
<div class="info">
...
</div>
<div class="info">
...
</div>
<div class="info">
...
</div>
Now, I would change the id tags: titleInfo and textInfo of every div with class info in ascending order.
<div class="info">
..<input id="titleInfo1"..
..<textarea id="textInfo1"..
</div>
<div class="info">
..<input id="titleInfo2"..
..<textarea id="textInfo2"..
</div>
<div class="info">
..<input id="titleInfo3"..
..<textarea id="textInfo3"..
</div>
and so on.
I thought to iterate by class info:
var x = 1;
$(".info").each(function() {
//Now, I don't know how to change the ids
x++;
});

You need to update the code to following
var x = 1;
$(".info").each(function() {
var elems = $(this).find(".form-control"); // get all the input elements with class form-control
elems.each(function() { // iterate over the elements
$(this).attr("id", $(this).attr("id") + x); // update id
});
x++;
});
Update
var x = 1;
$(".info").each(function() {
var elems = $(this).find(".form-control"); // get all the input elements with class form-control
$(elems[0]).attr("id", "titleInfo" + x);
$(elems[1]).attr("id", "textInfo" + x);
x++;
});

You should really do this server side, within the loop control you have that generates those blocks. For the sake of answering, here you go.
$(".info").each(function(index) {
var $title = $(this).find("#titleInfo");
var $text = $(this).find("#textInfo");
$title[0].id += (index+1);
$text[0].id += (index+1);
});
Take a look at this demo as well.

Find the below code snippet.
var x = 1;
$(".info").each(function() {
var ele=$(this).find('.form-control');
ele.each(function(){
setId($(this),x)
})
x++;
});
function setId(ele,x){
ele.attr('id',ele.attr('id')+x)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="info">
<div class="form-group">
<label class="control-label col-sm-2">Title</label>
<div class="col-xs-10 col-sm-8">
<input id="titleInfo" class="form-control" type="text" placeholder="Title">
</div>
<div class="col-xs-1 col-sm-1">
<button class="btn btn-default remove_field"><i class="fa fa-remove"></i></button>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Text</label>
<div class="col-xs-10 col-sm-8">
<textarea id="textInfo" class="form-control" type="text" placeholder="..."></textarea>
</div>
</div>
</div>
This also does the same.
Script
var x = 1;
$(".info").each(function() {
var ele=$(this).find('.form-control');
ele.each(function(){
$(this).attr('id',$(this).attr('id')+x)
})
x++;
});