How to make function run only with every cloned div separately not with orginal

Question

I need to run a jquery function on drop-down change, but when I clone the div element and the drop-down of the cloned element changes, the effect happens in the first div.

$(document).on('change', '#extrabed', function() {
  var value2 = $(this).val();
  var toAppend2 = '';
  var $container2 = $(this).siblings('#container2')

  switch (value2) {
    case 'No':
      toAppend2 = (function() {
        $("#extbed").hide();
      });
      $container2.html(toAppend2);
      return;
      break;

    case 'Yes':
      toAppend2 = (function() {
        $("#extbed").show();
      });
      $container2.html(toAppend2);
      return;
      break;

    default:
      return;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container2">

  <div id="container2">
    <div id='extbed' style='display: none;'>
      <input name='fnameextrabed[]' id='fnameextrabed' type='text' class='stretch' placeholder='First Name' size='15' maxlength='30'>
      <input name='lnameextrabed[]' id='lnameextrabed' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30'>
    </div>
  </div>

demo

Also, after cloning, the new div takes the values from the original one. How can i reset it?

Answer 1

Working fiddle.

You need to use classes instead of id's since when you clone the elements that will lead you to duplicate identifiers what makes your HTML code invalid.

So when you change the id's by classes you must pass the class extbed to the x/y function since if you will use .extbed directly as a selector, it will select all the element with this class what will cause the show hide of all instances cloned and original in the same time.

NOTE: Hide the .extbed part in the cloned instance using :

$clone.find('.extbed').hide().find('input').val('');

$(document).ready(function() {
  var genroomid = 2; // change 0 to the number you want to start with

  $(".add-row").click(function() {
    var $clone = $("ul.personal-details").first().clone();
    var $input = $clone.find('#roomid');
    $input.val(genroomid).attr('genroomid', +genroomid) // change fileid with any string you want 
    $clone.find('.extbed').hide().find('input').val('');
    $clone.append("<button type='button' class='remove-row'>-</button>");
    $clone.insertBefore(".add-row");
    genroomid++; // increase id by 1
  });

  $(".cloned-removed-div").on("click", ".remove-row", function() {
    $(this).parent().remove();
    genroomid--;
  });

  var x = (function(extbed) {
    extbed.hide();
    $(".divvisextbed").val('0');
  });

  var y = (function(extbed) {
    extbed.show();
    $(".divvisextbed").val('1');
  });

  // code of display guest info of extra bed
  $(document).on('change', '.extrabed', function() {
    var value2 = $(this).val();
    var toAppend2 = '';
    var $container2 = $(this).siblings('.container2');
    var extbed = $container2.find(".extbed");

    switch (value2) {
      case 'No':
        toAppend2 = x(extbed);
        $container2.html(toAppend2);

        return;
        break;
      case 'Yes':
        toAppend2 = y(extbed);
        $container2.html(toAppend2);
        return;
        break;
      default:
        return;
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form_reservations" method="post" action="2loopadd.php">
  <div class="cloned-removed-div">
    <ul class="personal-details">
      <table class="stretch" border="1">
        <tr>
          <td>
            <label for="extrabed">Extra Bed
                <select class="stretch extrabed"  name="extrabed[]" required="required">
                	<option value="" disabled selected hidden>Extra Bed</option>
                  <option value="No">No</option>
                  <option value="Yes">Yes</option>
                </select>
                <div class="container2">
				
                <div class='extbed' style='display: none;'>
                <input name='divvisextbed[]' class='divvisextbed' type='hidden' value='0'>
                <select class='stretch' name='prefixextrabed[]' id='prefixextrabed'>
                  <option value='Mr'>Mr</option>
                  <option value='Ms'>Ms</option>
                  <option value='Child'>Child</option>
                  <option value='Infant'>Infant</option>
                </select>
                <input name='fnameextrabed[]' id='fnameextrabed' type='text' class='stretch' placeholder='First Name' size='15'  maxlength='30'  >
                <input name='lnameextrabed[]' id='lnameextrabed' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30'   >
                <input name='nationalityextrabed[]' id='nationalityextrabed' type='text' placeholder='Nationality' class='stretch' size='15' maxlength='30'  >
                </div>

                </div></label>
          </td>
        </tr>
      </table>
    </ul>
    <button type="button" class="add-row">+ New Client</button>
  </div>
</form>

Answer 2

All answers so far fail to address the second part of the question and reset the subelements, so here we go...

$(document).ready(function() {
  var genroomid = 2;
  $(".add-row").click(function() {
    var $clone = $("ul.personal-details").first().clone();
    var $input = $clone.find('#roomid');
    $input.val(genroomid).attr('genroomid', +genroomid)
    // Reset the values
    $clone.find('#extbed').hide().find('input').val('');
    $clone.append("<button type='button' class='remove-row'>-</button>");
    $clone.insertBefore(".add-row");
    genroomid++;
  });

  $(".cloned-removed-div").on("click", ".remove-row", function() {
    $(this).parent().remove();
    genroomid--;
  });

  // Limit the id search to the element receiving the event
  var x = (function() {

    $("#extbed", this).hide();
    $("#divvisextbed", this).val('0');
  });


  var y = (function() {
    $("#extbed", this).show();
    $("#divvisextbed", this).val('1');

  });

  // code of display guest info of extra bed
  $(document).on('change', '#extrabed', function() {
    var value2 = $(this).val();
    var toAppend2 = '';
    var $container2 = $(this).siblings('#container2')

    switch (value2) {
      case 'No':

        toAppend2 = x;
        $container2.html(toAppend2);

        return;
        break;

      case 'Yes':
        toAppend2 = y;

        $container2.html(toAppend2);
        return;
        break;

      default:
        //toAppend2 = $container2.html(toAppend2);
        return;
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form_reservations" method="post" action="2loopadd.php">
  <div class="cloned-removed-div">
    <ul class="personal-details">
      <table class="stretch" border="1">
        <tr>
          <td>
            <label for="extrabed">Extra Bed</label>
            <select class="stretch" name="extrabed[]" id="extrabed" required="required">
              <option value="" disabled selected hidden>Extra Bed</option>
              <option value="No">No</option>
              <option value="Yes">Yes</option>
            </select>
            <div id="container2">
              <div id='extbed' style='display: none;'>
                <input name='divvisextbed[]' id='divvisextbed' type='hidden' value='0'>
                <select class='stretch' name='prefixextrabed[]' id='prefixextrabed'>
                  <option value='Mr'>Mr</option>
                  <option value='Ms'>Ms</option>
                  <option value='Child'>Child</option>
                  <option value='Infant'>Infant</option>
                </select>
                <input name='fnameextrabed[]' id='fnameextrabed' type='text' class='stretch' placeholder='First Name' size='15' maxlength='30'>
                <input name='lnameextrabed[]' id='lnameextrabed' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30'>
                <input name='nationalityextrabed[]' id='nationalityextrabed' type='text' placeholder='Nationality' class='stretch' size='15' maxlength='30'>
              </div>
            </div>
            </label>
          </td>
        </tr>
      </table>
    </ul>
    <button type="button" class="add-row">+ New Client</button>
    <table width="25%" border="0">
      <tr>
        <input type="submit" name="Submit" value="Insert">
      </tr>
    </table>
  </div>
</form>

Answer 3

You don't need to set the html of .container2 on every click.. You can just show or hide the #extbed instead.

$(document).ready(function() {
  var genroomid = 2; // change 0 to the number you want to start with
  $(".add-row").click(function() {
	var $clone = $("ul.personal-details").first().clone();
	var $input = $clone.find('#roomid');
	$input.val(genroomid).attr('genroomid', +genroomid) // change fileid with any string you want 
  $clone.find("#extbed").css("display", "none");
	$clone.append("<button type='button' class='remove-row'>-</button>");
	$clone.insertBefore(".add-row");
	genroomid++; // increase id by 1
  });

  $(".cloned-removed-div").on("click", ".remove-row", function() {
    $(this).parent().remove();
    genroomid--;						  
  });
  		/*var x =(function(){
		
		$("#extbed").hide();
		$("#divvisextbed").val('0');
		});
	
	var y =(function(){
			$("#extbed").show();
			$("#divvisextbed").val('1');
			
		});*/
		
  	// code of display guest info of extra bed
  	$(document).on('change', '#extrabed', function() {
			var value2 = $(this).val();
			var toAppend2 = '';
			var $container2 = $(this).siblings('#container2')
    switch (value2) {
      case 'No':
        //toAppend2 = $container2.html(toAppend2);
		//toAppend2 = x;
    
		$($container2).find("#extbed").hide();
		$($container2).find("#divvisextbed").val('0');
		/*
		$(function(){
		$("#prefixextrabed").prop('required',false);
		$("#fnameextrabed").prop('required',false);
		$("#lnameextrabed").prop('required',false);
		$("#nationalityextrabed").prop('required',false);
		
		});
		*/
		//$container2.html(toAppend2);
		
        return;
        break;

      case 'Yes':
        //toAppend2 = blkofcod1ext + blkofcod2ext + blkofcod3ext;
		//toAppend2 = y;
    	$($container2).find("#extbed").show();
			 $($container2).find("#divvisextbed").val('1');
		
		/*
		$(function(){
		$("#prefixextrabed").prop('required',true);
		$("#fnameextrabed").prop('required',true);
		$("#lnameextrabed").prop('required',true);
		$("#nationalityextrabed").prop('required',true);
		
		});
		*/
		//$container2.html(toAppend2);
        return;
        break;

      default:
        //toAppend2 = $container2.html(toAppend2);
        return;
    }
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form_reservations" method="post" action="2loopadd.php">
<div class="cloned-removed-div">
<ul class="personal-details">
<table class="stretch" border="1">
<tr>
<td>
  <label for="extrabed">Extra Bed
                <select class="stretch"  name="extrabed[]" id="extrabed" required="required">
                	<option value="" disabled selected hidden>Extra Bed</option>
					<option value="No">No</option>
					<option value="Yes">Yes</option>
				</select>
                <div id="container2">
				
				<div id='extbed' style='display: none;'>
				<input name='divvisextbed[]' id='divvisextbed' type='hidden' value='0'>
				<select class='stretch' name='prefixextrabed[]' id='prefixextrabed'>
					<option value='Mr'>Mr</option>
					<option value='Ms'>Ms</option>
					<option value='Child'>Child</option>
					<option value='Infant'>Infant</option>
				</select>
				<input name='fnameextrabed[]' id='fnameextrabed' type='text' class='stretch' placeholder='First Name' size='15'  maxlength='30'  >
				<input name='lnameextrabed[]' id='lnameextrabed' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30'   >
				<input name='nationalityextrabed[]' id='nationalityextrabed' type='text' placeholder='Nationality' class='stretch' size='15' maxlength='30'  >
				</div>
				
				</div></label>
</td>
</tr>


</table>
         
       
       </ul>
        <button type="button" class="add-row" >+ New Client</button>
       <table width="25%" border="0"> <tr> <input type="submit" name="Submit" value="Insert"></tr></table>
      </div>
</form>

You can also test it here..