Я динамически добавляю поля.всякий раз, когда новые поля созданы, я просто хочу показать поле ввода или номер поля метки.Предположим, если щелкнуть, чтобы динамически добавить новое поле, которое должно вызвать 1, если появится второе, то должно вызвать 2. Я пробовал некоторую логику там в моем коде, но не работает.
$(function() {
/*here my values to increment whenever added newly form */
var i = 1;
i++;
var max_fields = 6;
var this_button_work_for_click_to_add_rooms = $(".this_button_work_for_click_to_add_rooms");
var this_is_field_wrapper = $(".this_is_field_wrapper");
var add_fields = '<div><div class="row"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults[]" name="selected_adults[]" class="form-control"><option value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>'+i+' Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs[]" name="selected_childs[]" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col" value="1">1</option><option id="second_child_col" value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select class="form-control" id="selected_childs_age_group_one[]" name="selected_childs_age_group_one[]"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two[]" name="selected_childs_age_group_two[]"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
//here we starting counting...
var input_count=1;
//add buttong dynamically over here...
$(this_button_work_for_click_to_add_rooms).click(function(event) {
/* Act on the event */
if(input_count<max_fields){
input_count++;
$(this_is_field_wrapper).append(add_fields);
}
});
$(this_is_field_wrapper).on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).parent('div').remove();
input_count--;
});
});
<!DOCTYPE html>
<html>
<head>
<title>Welcome|Home</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="this_is_field_wrapper">
<div class="row">
<div class="form-group">
<div class="col-xs-1">
<h6>Options -</h6>
<h6 class="#">Adults(12+)</h6>
<select id="selected_adults[]" name="selected_adults[]" class="form-control">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>1st Room</h6>
<h6 class="m_label">Child(0-12)</h6>
<select id="selected_childs[]" name="selected_childs[]" onchange="displayingNumberOfChildAge(this);" class="form-control">
<option>select</option>
<option id="first_child_col" value="1">1</option>
<option id="second_child_col" value="2">2</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(1)Age</h6>
<select class="form-control" id="selected_childs_age_group_one[]" name="selected_childs_age_group_one[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(2)Age</h6>
<select class="form-control" id="selected_childs_age_group_two[]" name="selected_childs_age_group_two[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col-xs-1">
<a href="javascript:void(0);" class="this_button_work_for_click_to_add_rooms" title="Add field">Click & Add Rooms</a>
</div>
</div>
<!-- here ending form group -->
</div>
<!-- here ending row -->
</div>
</body>
</html>
Как вы можете видеть при динамическом добавлении, это дает 2-ую комнату.не увеличивать значение и не показывать значения в этих полях.пожалуйста, помогите спасибо заранее