<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container py-5"> <div class="position_show_adv_div"> <div class="row "> <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6"> <select name="" id="" class="form-control show_adv"> <option value="" disabled selected> show adv </option> <option value="1"> Home </option> <option value="2"> Cateogry</option> <option value="3"> Sub Cateogry</option> <option value="4"> PopUp</option> </select> </div> <div class="show_adv_option col-xl-9 col-lg-8 col-md-6 col-sm-6"> <div class="form-row"> <div class="col-auto"> <!-- <select name="" id="" class="form-control"> <option value="" disabled selected> Category </option> <option value="1"> Category 1</option> <option value="2"> Category 2</option> <option value="3"> Cateogry 3</option> <option value="4"> Category 4</option> </select> --> </div> <div class="col-auto"> <button type="button" class="btn btn-danger">delete</button> </div> </div> </div> </div> </div> <div class="row mt-4"> <div class="col-xl-12"> <button type="button" class="btn btn-success position_show_adv"> Add Position </button> </div> </div> </div>

$(".show_adv").on("change", function(){ var show_adv = $(this).val(); alert(show_adv); }); var i = 0; $(".position_show_adv").on("click", function(){ var html = '\ <div class="row" id="position_'+ i +'">\ <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">\ <select name="" id="" class="form-control show_adv">\ <option value="" disabled selected> show adv </option>\ <option value="1"> Home </option>\ <option value="2"> Cateogry</option>\ <option value="3"> Sub Cateogry</option>\ <option value="4"> PopUp</option> \ </select>\ </div>\ <div class="show_adv_option col-xl-9 col-lg-8 col-md-6 col-sm-6">\ <div class="form-row">\ <div class="col-auto">\ <!--\ <select name="" id="" class="form-control">\ <option value="" disabled selected> Category </option>\ <option value="1"> Category 1</option>\ <option value="2"> Category 2</option>\ <option value="3"> Cateogry 3</option>\ <option value="4"> Category 4</option> \ </select>\ -->\ </div>\ <div class="col-auto">\ <button type="button" class="btn btn-danger" onclick="remove_position('+ i +')">delete</button>\ </div>\ </div>\ </div>\ </div>'; $(".position_show_adv_div").append(html); $i++; }); function remove_position(position_id){ $("#position_"+ position_id).remove(); }