unable to increment values by one inside of the label using javascript

up vote
0
down vote

favorite

i'm dynamically adding fields. whenever fields newly created i just want to show the input field or a label field number.
suppose if click to add new field dynamically which is should call 1 if appear second then should call 2.
i had tried some logic over there in my coding but doesn't working.

$(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>

As you can see whenever adding dynamically it is giving 2nd room. not increment the value nor showing values on that the fields.
please help
thanks in advance

asked Nov 21 at 3:38

md server

217

add a comment |

up vote
0
down vote

favorite

$(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>

As you can see whenever adding dynamically it is giving 2nd room. not increment the value nor showing values on that the fields.
please help
thanks in advance

asked Nov 21 at 3:38

md server

217

add a comment |

up vote
0
down vote

favorite

$(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>

As you can see whenever adding dynamically it is giving 2nd room. not increment the value nor showing values on that the fields.
please help
thanks in advance

asked Nov 21 at 3:38

md server

217

$(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>

As you can see whenever adding dynamically it is giving 2nd room. not increment the value nor showing values on that the fields.
please help
thanks in advance

$(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>

$(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>

javascript php jquery bootstrap-4 codeigniter-3

asked Nov 21 at 3:38

md server

217

asked Nov 21 at 3:38

md server

217

asked Nov 21 at 3:38

md server

217

asked Nov 21 at 3:38

md server

217

asked Nov 21 at 3:38

md server

217

add a comment |

2 Answers
2

active

oldest

votes

up vote
1
down vote

accepted

Variables are set on start and needs to be re-set? to change its value, you also were not incrementing "i" in your for loops but used it as a variable for the add_fields.

Try This

$(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");







        //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++;

                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>'+input_count+' 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>';

                $(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--;

        });

    });

edited Nov 21 at 4:16

answered Nov 21 at 4:02

comphonia

34417

yes its worked now. thanks alottt comphonia
– md server
Nov 21 at 5:05

add a comment |

up vote
1
down vote

Try This:

<!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 item">

            <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><span class="room_no">1</span> st 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>

JavaScript:

<script>

   $(function() {







      //add buttong dynamically over here...

      $('.this_button_work_for_click_to_add_rooms').click(function(event) {

         var numItems = $('.item').length;

         var count = numItems +1;



         var add_fields = '<div><div class="row item"><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><span class="room_no">'+count+'</span> 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>';





         $(".this_is_field_wrapper").append(add_fields);



      });



      $('.this_is_field_wrapper').on('click','.remove_input_button',function(e){

         e.preventDefault();

         $(this).closest('div.item').remove();

         numberRows();

      });



      function numberRows() {

         $('.room_no').each(function(i) {

         $(this).text(i + 1);

         console.log(i);

         });

      }

   });

</script>

answered Nov 21 at 4:17

Delwar Sumon

374112

wowww really nice. thanks for answer Delwar sumon
– md server
Nov 21 at 5:03

My Pleasure. Happy coding.
– Delwar Sumon
Nov 21 at 5:46

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404923%2funable-to-increment-values-by-one-inside-of-the-label-using-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
1
down vote

accepted

Variables are set on start and needs to be re-set? to change its value, you also were not incrementing "i" in your for loops but used it as a variable for the add_fields.

Try This

$(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");







        //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++;

                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>'+input_count+' 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>';

                $(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--;

        });

    });

edited Nov 21 at 4:16

answered Nov 21 at 4:02

comphonia

34417

yes its worked now. thanks alottt comphonia
– md server
Nov 21 at 5:05

add a comment |

up vote
1
down vote

accepted

Variables are set on start and needs to be re-set? to change its value, you also were not incrementing "i" in your for loops but used it as a variable for the add_fields.

Try This

$(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");







        //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++;

                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>'+input_count+' 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>';

                $(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--;

        });

    });

edited Nov 21 at 4:16

answered Nov 21 at 4:02

comphonia

34417

yes its worked now. thanks alottt comphonia
– md server
Nov 21 at 5:05

add a comment |

up vote
1
down vote

accepted

Variables are set on start and needs to be re-set? to change its value, you also were not incrementing "i" in your for loops but used it as a variable for the add_fields.

Try This

$(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");







        //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++;

                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>'+input_count+' 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>';

                $(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--;

        });

    });

edited Nov 21 at 4:16

answered Nov 21 at 4:02

comphonia

34417

Variables are set on start and needs to be re-set? to change its value, you also were not incrementing "i" in your for loops but used it as a variable for the add_fields.

Try This

$(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");







        //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++;

                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>'+input_count+' 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>';

                $(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--;

        });

    });

edited Nov 21 at 4:16

answered Nov 21 at 4:02

comphonia

34417

edited Nov 21 at 4:16

answered Nov 21 at 4:02

comphonia

34417

answered Nov 21 at 4:02

comphonia

34417

answered Nov 21 at 4:02

comphonia

34417

yes its worked now. thanks alottt comphonia
– md server
Nov 21 at 5:05

add a comment |

yes its worked now. thanks alottt comphonia
– md server
Nov 21 at 5:05

yes its worked now. thanks alottt comphonia
– md server
Nov 21 at 5:05

add a comment |

up vote
1
down vote

Try This:

<!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 item">

            <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><span class="room_no">1</span> st 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>

JavaScript:

<script>

   $(function() {







      //add buttong dynamically over here...

      $('.this_button_work_for_click_to_add_rooms').click(function(event) {

         var numItems = $('.item').length;

         var count = numItems +1;



         var add_fields = '<div><div class="row item"><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><span class="room_no">'+count+'</span> 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>';





         $(".this_is_field_wrapper").append(add_fields);



      });



      $('.this_is_field_wrapper').on('click','.remove_input_button',function(e){

         e.preventDefault();

         $(this).closest('div.item').remove();

         numberRows();

      });



      function numberRows() {

         $('.room_no').each(function(i) {

         $(this).text(i + 1);

         console.log(i);

         });

      }

   });

</script>

answered Nov 21 at 4:17

Delwar Sumon

374112

wowww really nice. thanks for answer Delwar sumon
– md server
Nov 21 at 5:03

My Pleasure. Happy coding.
– Delwar Sumon
Nov 21 at 5:46

add a comment |

up vote
1
down vote

Try This:

<!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 item">

            <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><span class="room_no">1</span> st 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>

JavaScript:

<script>

   $(function() {







      //add buttong dynamically over here...

      $('.this_button_work_for_click_to_add_rooms').click(function(event) {

         var numItems = $('.item').length;

         var count = numItems +1;



         var add_fields = '<div><div class="row item"><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><span class="room_no">'+count+'</span> 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>';





         $(".this_is_field_wrapper").append(add_fields);



      });



      $('.this_is_field_wrapper').on('click','.remove_input_button',function(e){

         e.preventDefault();

         $(this).closest('div.item').remove();

         numberRows();

      });



      function numberRows() {

         $('.room_no').each(function(i) {

         $(this).text(i + 1);

         console.log(i);

         });

      }

   });

</script>

answered Nov 21 at 4:17

Delwar Sumon

374112

wowww really nice. thanks for answer Delwar sumon
– md server
Nov 21 at 5:03

My Pleasure. Happy coding.
– Delwar Sumon
Nov 21 at 5:46

add a comment |

up vote
1
down vote

Try This:

<!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 item">

            <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><span class="room_no">1</span> st 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>

JavaScript:

<script>

   $(function() {







      //add buttong dynamically over here...

      $('.this_button_work_for_click_to_add_rooms').click(function(event) {

         var numItems = $('.item').length;

         var count = numItems +1;



         var add_fields = '<div><div class="row item"><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><span class="room_no">'+count+'</span> 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>';





         $(".this_is_field_wrapper").append(add_fields);



      });



      $('.this_is_field_wrapper').on('click','.remove_input_button',function(e){

         e.preventDefault();

         $(this).closest('div.item').remove();

         numberRows();

      });



      function numberRows() {

         $('.room_no').each(function(i) {

         $(this).text(i + 1);

         console.log(i);

         });

      }

   });

</script>

answered Nov 21 at 4:17

Delwar Sumon

374112

Try This:

<!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 item">

            <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><span class="room_no">1</span> st 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>

JavaScript:

<script>

   $(function() {







      //add buttong dynamically over here...

      $('.this_button_work_for_click_to_add_rooms').click(function(event) {

         var numItems = $('.item').length;

         var count = numItems +1;



         var add_fields = '<div><div class="row item"><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><span class="room_no">'+count+'</span> 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>';





         $(".this_is_field_wrapper").append(add_fields);



      });



      $('.this_is_field_wrapper').on('click','.remove_input_button',function(e){

         e.preventDefault();

         $(this).closest('div.item').remove();

         numberRows();

      });



      function numberRows() {

         $('.room_no').each(function(i) {

         $(this).text(i + 1);

         console.log(i);

         });

      }

   });

</script>

answered Nov 21 at 4:17

Delwar Sumon

374112

answered Nov 21 at 4:17

Delwar Sumon

374112

answered Nov 21 at 4:17

Delwar Sumon

374112

answered Nov 21 at 4:17

Delwar Sumon

374112

wowww really nice. thanks for answer Delwar sumon
– md server
Nov 21 at 5:03

My Pleasure. Happy coding.
– Delwar Sumon
Nov 21 at 5:46

add a comment |

wowww really nice. thanks for answer Delwar sumon
– md server
Nov 21 at 5:03

My Pleasure. Happy coding.
– Delwar Sumon
Nov 21 at 5:46

wowww really nice. thanks for answer Delwar sumon
– md server
Nov 21 at 5:03

My Pleasure. Happy coding.
– Delwar Sumon
Nov 21 at 5:46

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Htykuut