使用下拉框和复选框jquery添加动态表

Question

<div class="table table-responsive">
<table class="table table-bordered">
    <tbody>
    <tr>
        <td>Reward Title</td>
        <td><input type="text" class="form-control" name="reward_title[]" placeholder="Title" required=""></td>
    </tr>

    <tr>
        <td>Pledge Amount</td>
        <td><input type="text" class="form-control" name="pledge_amount[]" placeholder="Amount" required=""></td>
    </tr>

    <tr>
        <td>Description</td>
        <td> <textarea name="reward_description[]" placeholder="Description" style="width: 100%;" required=""></textarea></td>
    </tr>

    <tr>
        <td>Estimated Delivery</td>
        <td> <input type="text" name="estimated_delivery[]" id="estimated_delivery" class="form-control" placeholder="Date & Time" required=""></td>
    </tr>

    <tr>
        <td>Shipping Details</td>
        <td>
            <select name="shipping_type[]" class="form-control" id="shipping_type" onclick="shipping_type();">
        <option>Select an Option</option>
        <option value="0" id="noship">No Shipping Involved</option>
        <option value="1" id="shipcountry">Only Ship to certain Countries</option>
        <option value="2" id="shipworld">Ships anywhere in the world</option>
        </select><br/>
        <div class="col-md-12" id="shipping_amount_country" style="display: none;">
                <p>India</p>
                 <input type="text" name="shipping_amount_country[]" class="form-control" placeholder="amount">
        </div>

        <div class="col-md-12" id="shipping_amount_anywhere" style="display: none;">
                <p>Ships anywhere in the world</p>
                <input type="text" name="shipping_amount_anywhere[]" class="form-control" placeholder="amount">  
            </div>
        </td>
    </tr>

    <tr>
        <td>Limit Availability </td>
        <td>
            <input type="checkbox" name="limit_status[]" id="limit_status"> &nbsp; Enable reward limit <br/>
            <div class="row" id="limit_avail" style="display: none;">
            <div class="col-md-4">
                <p>Set backer limit</p>
                <input type="text" name="backer_limit[]" class="form-control">
            </div>
            <div class="col-md-4">
                <p>Available from:</p>
                <input type="text" name="start_date[]" id="start_date" class="form-control">
            </div>
            <div class="col-md-4">
                <p>Available until:</p>
                  <input type="text" name="end_date[]" id="end_date" class="form-control">
            </div>
            </div>
        </td>
    </tr>

    </tbody>
</table>
</div>

<button type="button" class="btn btn-success" onclick="addmore();"> Add More</button>
<input type="submit" name="save" value="save" class="btn btn-primary">

jquery的

<script>

$('#start_date').datepicker();
$('#end_date').datepicker();

function shipping_type(){
 $shipping_type = $("#shipping_type").val();

 if($shipping_type == 0){
     $("#shipping_amount_country").css('display','none');
     $('#shipping_amount_anywhere').css('display','none');
 }

  if($shipping_type == 1){
     $("#shipping_amount_country").css('display','block');
     $('#shipping_amount_anywhere').css('display','none');
 }

   if($shipping_type == 2){
     $("#shipping_amount_country").css('display','none');
     $('#shipping_amount_anywhere').css('display','block');
 }
}

$("#limit_status").click(function (){
    if ($(this).is(":checked")) {
            $("#limit_avail").show();
    } else {
            $("#limit_avail").hide();
    }
});

function addmore(){

  var data ='<tr><td>Reward Title</td> <td><input type="text" class="form-control" name="reward_title[]" id="reward_title" placeholder="Title" required=""></td></tr>';  
      data+='<tr><td>Pledge Amount</td><td><input type="text" class="form-control" name="pledge_amount[]" id="pledge_amount" placeholder="Amount" required=""></td></tr>';
      data+='<tr><td>Description</td><td> <textarea name="reward_description[]" id="reward_description" placeholder="Description" style="width: 100%;" required=""></textarea></td></tr>';
      data+='<tr><td>Estimated Delivery</td><td> <input type="text" name="estimated_delivery[]" id="estimated_delivery" class="form-control" placeholder="Date & Time" required=""></td></tr>';

      data+='<tr><td>Shipping Details</td><td>'+
            '<select name="shipping_type[]" class="form-control" id="shipping_type">'+
            '<option>Select an Option</option>'+
            '<option value="0" id="noship">No Shipping Involved</option>'+
            '<option value="1" id="shipcountry">Only Ship to certain Countries</option>'+
            '<option value="2" id="shipworld">Ships anywhere in the world</option>'+
            '</select><br/>'+

            '<div class="col-md-12" id="shipping_amount_country" style="display: none;">'+
            '<p>India</p>'+
            '<input type="text" name="shipping_amount_country[]" class="form-control" placeholder="amount">'+
            '</div>'+

            '<div class="col-md-12" id="shipping_amount_anywhere" style="display: none;">'+
            '<p>Ships anywhere in the world</p>'+
            '<input type="text" name="shipping_amount_anywhere[]" class="form-control" placeholder="amount">'+  
            '</div>'+
            '</td>'+
            '</tr>';

    data+='<tr><td>Limit Availability</td>'+
          '<td><input type="checkbox" name="limit_status[]" id="limit_status"> &nbsp; Enable reward limit <br/>'+
          '<div class="row" id="limit_avail" style="display: none;">'+
            '<div class="col-md-4">'+
                '<p>Set backer limit</p>'+
                '<input type="text" name="backer_limit[]" class="form-control">'+
                '</div>'+
                '<div class="col-md-4">'+
                    '<p>Available from:</p>'+
                    '<input type="text" name="start_date[]" id="start_date" class="form-control">'+
                '</div>'+
                '<div class="col-md-4">'+
                    '<p>Available until:</p>'+
                    '<input type="text" name="end_date[]" id="end_date" class="form-control">'+
                '</div>'+
                '</div>'+
            '</td>'+
        '</tr>';
    $('table').append(data);


}



</script>

我的问题：dynemically添加datepicker，下拉记录以执行操作，复选框点击执行show and hide action perform。 jQuery小提琴链接检查：https://jsfiddle.net/kishankakadiya945/4bk12cb5/4/