on change function also affect on clone div

Question

i want to show and hide div base on change function.. and its work well on first div whenever i add(append) new div that time change function affect in both div.

$(".transport_type").hide();
 $(".rate").hide();
 $(".adult").hide();
 $(".child").hide();
$("body").on("change", "#transport_cat", function(e) {
e.preventDefault();
        if($(this).val() == 'PVT') {
            $('.rate').show(); 
        } else {
            $('.rate').hide(); 
        } 
        if($(this).val() == 'SIC') {
            $('.adult').show(); 
            $('.child').show(); 
        } else {
            $('.adult').hide();
            $('.child').hide();             
        } 
    });

here is a demo here

i want to do only show hide div on change that select div not want to affect on another div.please help me...

Answer 1

Couple of mistakes:

• Do not use id attribute for transport_cat element as this element is getting cloned and multiple elements with same id is wrong
• While hide/show div, set the context as well, just $('.rate').show() will show all divs with rate class. So set context.
• Remove $("body").on("change", "#transport_cat", function(e) { binding of change event while cloning as you are using $.on() method

I have updated the fiddle - https://jsfiddle.net/swpL5xwp/2/

    <select class="form_line_only form-control className transport_cat" name="tr_cartypes[]">
          <option selected> Select Tour </option>
          <option value="PVT"> PVT </option>
          <option value="SIC"> SIC </option>
        </select>


$("body").on("change", ".transport_cat", function(e) {
  e.preventDefault();
  var $context = $(this).parents('.entry_special_offers');
  if ($(this).val() == 'PVT') {
    $('.rate',$context).show();
  } else {
    $('.rate',$context).hide();
  }
  if ($(this).val() == 'SIC') {
    $('.adult',$context).show();
    $('.child',$context).show();
  } else {
    $('.adult',$context).hide();
    $('.child',$context).hide();
  }
});

Answer 2

Couple of things you need to look into,

1. You need to find the closest entry_special_offers class.
2. You need fix your current implementation where you find all elements with class rate / adult and others. You should find them withing current entry_special_offers div only.
3. Also you have attached change events twice which is not required.

 $(".transport_type").hide(); $(".rate").hide(); $(".adult").hide(); $(".child").hide(); $("body").on("change", "#transport_cat", function(e) { e.preventDefault(); if ($(this).val() == 'PVT') { $(this).closest(".entry_special_offers").find('.rate').show(); } else { $(this).closest(".entry_special_offers").find('.rate').hide(); } if ($(this).val() == 'SIC') { $(this).closest(".entry_special_offers").find('.adult').show(); $(this).closest(".entry_special_offers").find('.child').show(); } else { $(this).closest(".entry_special_offers").find('.adult').hide(); $(this).closest(".entry_special_offers").find('.child').hide(); } }); $(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $('.controls_special_offers:first'), currentEntry = $(this).closest('.entry_special_offers'), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('input').val(''); controlForm.find('.entry_special_offers:not(:last) .btn-add') .removeClass('btn-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span class="glyphicon glyphicon-minus"></span>'); }).on('click', '.btn-remove', function(e) { $(this).closest('.entry_special_offers').remove(); e.preventDefault(); return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container excursions margin_top"> <!--container hotel --> <div class="controls_special_offers"> <div class="entry_special_offers input-group col-sm-12 col-xs-12 "> <div class="col-sm-2 col-xs-6"> <div class="form-group"> <label for="exampleInputindate">Tour</label> <div class="form-group"> <select class="form_line_only form-control className" name="tr_cartypes[]" id="transport_cat"> <option selected>Select Tour</option> <option value="PVT">PVT</option> <option value="SIC">SIC</option> </select> </div> </div> </div> <div class="col-sm-3 col-xs-6 transport_type"> <div class="form-group"> <label for="exampleInputindate">transportation type</label> <div class="form-group"> <select class="form_line_only form-control " name="tr_seattype[]"> <option selected>Select Type</option> <option>7 Seater</option> <option>15 Seater</option> <option>34 Seater</option> <option>50 Seater</option> </select> </div> </div> </div> <div class="col-sm-2 col-xs-6 rate"> <div class="form-group "> <label for="exampleInputindate">rate</label> <div class="form-group"> <input type="number" name="tc_rates[]" id="tc_rate" class=" form_line_only form-control" placeholder="Enter Price" value="" autocomplete="off"> </div> </div> </div> <div class="col-sm-2 col-xs-6 adult"> <div class="form-group"> <label for="exampleInputindate">Adult</label> <div class="form-group"> <input type="number" name="tc_adults[]" id="tc_adult" class=" form_line_only form-control" placeholder="Adult Price" value="" autocomplete="off"> </div> </div> </div> <div class="col-sm-2 col-xs-6 child"> <div class="form-group"> <label for="exampleInputindate">Child</label> <div class="form-group"> <input type="number" name="tc_childs[]" id="tc_child" class=" form_line_only form-control" placeholder=" Child Price " value="" autocomplete="off"> </div> </div> </div> <span class="input-group-btn day_plan pull-left"> <button class="btn btn-success btn-add add_col" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> <br> </div> </div>