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

Answer 2

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();
  }
});