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

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>