jQuery clone

Answer to the question - https://stackoverflow.com/questions/52512449/after-changing-drop-down-a-new-div-will-come-and-without-having-the-first-catego

by Anjana Silva

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
  <div class="row" style="margin-top: 50px">
    <!-- <h4>
      Change the third drop down. A new row will appear at the bottom without the selected option in first drop down.
    </h4> -->
  </div>
  <div class="row outer-content" style="margin-top: 50px" id="parent_row">
    <div class="col-md-4">
      <select class="form-control content-form" id="content-form" name="content_form">            
            <option value="category">Category</option>
            <option value="genre">Genre</option>
            <option value="cast">Cast</option>
        </select>
    </div>
    <div class="col-md-4">
      <select class="form-control content-type-section" id="content_type" name="content_type" onchange="removeDisableFromCondition(this)">
            <option selected disabled hidden>Select</option>
            <option value="123">Movie</option>
            <option value="321">TV</option>
            <option value="345">Cast</option>
            <option value="987">Genre</option>
        </select>
    </div>
    <div class="col-md-4">
      <select class="form-control condition-section" id="sel1" name="conditions" nchange="showAnotherSection()">
            <option selected disabled hidden>Select</option>
            <option value="1">AND</option>
            <option value="2">OR</option>                                
        </select>
    </div>
  </div>
  <div style="margin-top: 50px" id="cloned_copy">

  </div>




</div>

JavaScript

$(document).ready(function() {
  
});
$(document).on('change', '.condition-section' , function() {    
    var selectedVal = $(this).closest('.outer-content').find('.content-form').val();
    var target = $("#cloned_copy");
    //target.empty();
    $(this).closest('.outer-content').clone().appendTo(target);
    $("#cloned_copy option[value='" + selectedVal + "']").remove();
  });