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

jquery clone
jquery get element inside iframe
jquery find
jquery append
jquery innerhtml
access iframe element from parent jquery
jquery children
jquery contents

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>

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>

Description: Get the children of each element in the set of matched elements, including This method does not accept any arguments. Consider a simple <​div> with a number of text nodes, each of which is separated by two line .filter(​function(){ and methods can be modified without affecting the original jQuery object. The cloneNode () method creates a copy of a node, and returns the clone. The cloneNode () method clones all attributes and their values. Tip: Use the appendChild () or insertBefore () method to insert the cloned node to the document. Tip: Set the deep parameter value to true if you want to clone all descendants (children), otherwise false.

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>

)Returns: jQuery. Description: Create a deep copy of the set of matched elements. <div class="goodbye">Goodbye</div>. </div> Normally, any event handlers bound to the original element are not copied to the clone. Global Ajax Event Handlers · Helper Functions · Low-Level Interface · Shorthand Methods. clone4 cent (slower but for those who dislike eval () for purposes known only to them and their ancestors): Function.prototype.clone = function() { var newfun = new Function('return ' + this.toString()) (); for (var key in this) newfun[key] = this[key]; return newfun; };

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>

Complaint alleging that plaintiff is owner of a lot bounded on each side by a lot of Answer held to deny any present dispute or uncertainty as to location of original lines. to authorize processioning proceeding. only issue being location of lines. to all the processioners is proper, separate application to each is not fatal. As a general rule when doing low-level element manipulation you should either always use jQuery or never use it, but not mix the two. In the code you're using jQuery only to add class names, which could easily be done with plain JavaScript. Browser compatibility. .append () isn't supported by any version of Microsoft or Android browsers so if

Zepto will only set the $ global to itself if it is not yet defined. elements of collection and return all results of running the iterator function, with null and undefined  Hi, Create a variable and give it a name like “Cloned?” and select “For This Sprite Only”. Set it to 0 at the start and whenever the clones are deleted/reset. Then, in the “When x key is pressed” script, put if cloned? = 0, create a clone of myself and set cloned? to 1.

It's not possible to do thing.animate({ "height": "auto" });. return this.each(​function(i, el){ el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"})​. Pass a callback function to the function created by the factory function. The callback function will be entered into a queue. The limit function executes the first 10 functions in the queue and then waits until this interval has finished to execute the next 10 functions until the queue is empty.

Specifically, it does not produce a visual rendering, apply CSS, load external resources, or execute JavaScript. If your use case requires any of this functionality,  Stuff can break. In weird ways. Even when you specified the path in the installer and didn't do anything else. Fallout 3's DLC/Games for Windows Live! did not handle my original game installation

Comments
  • use class name instead of id for multiple element call in same event. Because id unique for whole document
  • @ prasanth when i did that any change of any drop down list, change all divs
  • because you need to look for the elements in the one that changed... code is only as smart as you make it. You said, find all the elements with this class so it did.
  • @TamerAbdallah please refer the below answers.You could understand