Form Dinamic (jQuery Append)

<style>
.small{
    width:130px;
}
.big{
    width:220px;
}
.btn{
    line-height: 15px;
}
.mini{
    width:40px;
}
</style>

<script>
$(document).ready(function(e) {
    var count = 1;

    /*$(".mini").spinedit({
        minimum: 0,
        maximum: 1000,
        step: 1
    });*/

    DataProvideType();

    $(document).on('click', '.btn-danger', function() {
        var tableData = $('#customFields tr').length;
        var total = parseInt(tableData)-1;
        alert(total);
    });

    $("#customFields").on('change', '.small', function() {
        var $this = $(this),
        id = $this.val();
        var prev = $this.parents('tr').children('td').eq(0).children().val();
        if(prev==1){
            if(id==0){
                $this.parents('tr').children('td').eq(2).children().val('');
            }else{
                $.ajax({
                    type: 'POST',
                    url: '<?php echo Yii::app()->createAbsoluteUrl("distributionplan/ambilassetmap"); ?>',
                    dataType: 'json',
                    data:{
                        id: id
                    },
                    cache: false,
                    success: function (result) {
                        $this.parents('tr').children('td').eq(2).children().val(result[0].total);
                    },
                    error: function(jqXHR, exception){
                        alert('Error : Data Count');
                    }
                });
            }
        }
    });

    $("#customFields").on('change', '.big', function() {
        var $this = $(this),
        id = $this.val();
        $this.parents('tr').children('td').eq(1).children().empty();
        if(id==1){
            $this.parents('tr').children('td').eq(2).children().val('');
            $this.parents('tr').children('td').eq(2).children().attr("readonly","readonly");
            $.ajax({
                type: 'GET',
                url: '<?php echo Yii::app()->createAbsoluteUrl("distributionplan/ambilpackage"); ?>',
                dataType: 'json',
                cache: false,
                success: function (result) {
                    $this.parents('tr').children('td').eq(1).children().append('<option value="0">-- Pilih --</option>');
                    $.each(result, function() {
                        $this.parents('tr').children('td').eq(1).children().append($('<option>', {
                            value: this.id,
                            text : this.package_number
                        }));
                    });
                },
                error: function(jqXHR, exception){
                    alert('Error : Query Package Data');
                }
            });
        }else if(id==2){
            $this.parents('tr').children('td').eq(2).children().val('');
            $this.parents('tr').children('td').eq(2).children().removeAttr("readonly");
            $.ajax({
                type: 'GET',
                url: '<?php echo Yii::app()->createAbsoluteUrl("distributionplan/ambiladditional"); ?>',
                dataType: 'json',
                cache: false,
                success: function (result) {
                    $this.parents('tr').children('td').eq(1).children().append('<option value="0">-- Pilih --</option>');
                    $.each(result, function() {
                        $this.parents('tr').children('td').eq(1).children().append($('<option>', {
                            value: this.id,
                            text : this.additional_asset_name
                        }));
                    });
                },
                error: function(jqXHR, exception){
                    alert('Error : Query Additional Data');
                }
            });
        }else{
            $this.parents('tr').children('td').eq(2).children().val('');
            $this.parents('tr').children('td').eq(2).children().attr("readonly","readonly");
            $this.parents('tr').children('td').eq(1).children().empty();
        }
    });

    $(".btn.btn-warning").click(function(){
        count += 1;
        var $row = $(
        '<tr valign="top">'
            + '<td>'+'</td>'
                + '<td><select class="small" id="data2_'+count+'" name="data2_'+count+'"></select></td>'
                + '&nbsp;'
                + '<td><input type="text" class="mini" id="data3_'+count+'" name="data3_'+count+'" autocomplete="off"/></td>'
                + '&nbsp;'
                + '<td><input type="text" class="mini" id="data4_'+count+'" name="data4_'+count+'" autocomplete="off"/>K+</td>'
                + '&nbsp;'
                + '<td><input type="text" class="mini" id="data5_'+count+'" name="data5_'+count+'" autocomplete="off"/></td>'
                + '&nbsp;'
                + '<td><input id="rows_' + count + '" name="rows[]" value="'+ count +'" type="hidden">'
                + '<a href="javascript:void(0);" class="remCF">Remove</a>'
        + '</tr>').appendTo("#customFields");

        var copyData = $("#data1_1").clone();
        var repID = copyData.attr('id', 'data1_'+count+'');
        var repName = copyData.attr('name', 'data1_'+count+'');

        $row.find('td:first').append(repID);

        $("html, body").animate({ scrollTop: $(document).height() }, "fast");
    });

    $("#customFields").on('click','.remCF',function(){
        $(this).parent().parent().remove();
        count -= 1;
    });

});// Tutup Document Ready

function DataProvideType(){
    $.ajax({
        type: 'GET',
        url: '<?php echo Yii::app()->createAbsoluteUrl("distributionplan/ambildefault"); ?>',
        dataType: 'json',
        cache: false,
        success: function (result) {
            $("#data1_1").append('<option value="0">-- Pilih --</option>');
            $.each(result, function() {
                $("#data1_1").append($('<option>', {
                    value: this.id,
                    text : this.distribution_item_type
                }));
            });
        },
        error: function(jqXHR, exception){
            alert('Error : Data Provide Type');
        }
    });
}


</script>

<div class="formSep">

        <label>
        <?php echo $form->labelEx($model,'distribution_plan_number'); ?>
        </label>

        <?php echo $form->textField($model,'distribution_plan_number',array(
            'size'=>60,
            'maxlength'=>100,
            'readonly'=>'readonly'
        )); ?>
        <span class="help-inline">
        <?php echo $form->error($model,'distribution_plan_number'); ?>
        </span>



        <label>
        <?php echo $form->labelEx($model,'distribution_destination'); ?>
        </label>

        <?php
            $models = DistributionDestination::model()->publish()->findAll();
            $list = CHtml::listData($models, 'id', 'distribution_destination');
            echo $form->dropDownList($model, 'distribution_destination', $list);
        ?>
        <span class="help-inline">
        <?php echo $form->error($model,'distribution_destination'); ?>
        </span>



        <label>
        <?php echo $form->labelEx($model,'destination_ro'); ?>
        </label>

        <?php
            $models = Region::model()->publish()->findAll();
            $list = CHtml::listData($models, 'id', 'region_name');
            echo $form->dropDownList($model, 'destination_ro', $list);
        ?>
        <span class="help-inline">
        <?php echo $form->error($model,'destination_ro'); ?>
        </span>



        <label>
        <?php echo $form->labelEx($model,'destination_ic'); ?>
        </label>

        <?php
            $models = Partner::model()->publish()->findAll();
            $list = CHtml::listData($models, 'id', 'partner_name');
            echo $form->dropDownList($model, 'destination_ic', $list);
        ?>
        <span class="help-inline">
        <?php echo $form->error($model,'destination_ic'); ?>
        </span>



        <label>
        <?php echo $form->labelEx($model,'expedition'); ?>
        </label>

        <?php
            $models = Expedition::model()->onlylogged()->findAll();
            $list = CHtml::listData($models, 'id', 'expedition_name');
            echo $form->dropDownList($model, 'expedition', $list);
        ?>
        <span class="help-inline">
        <?php echo $form->error($model,'expedition'); ?>
        </span>




        <label>
        <?php echo $form->labelEx($model,'published'); ?>
        </label>

        <?php echo
            $form->dropDownList($model,'published',array('0'=>'No','1'=>'Yes'),
            array('options' => array('1'=>array('selected'=>true))));
        ?>
        <span class="help-inline">
        <?php echo $form->error($model,'published'); ?>
        </span>


        <label>
        <?php echo $form->labelEx($model,'activate'); ?>
        </label>

        <?php echo
            $form->dropDownList($model,'activate',array('0'=>'No','1'=>'Yes'),
            array('options' => array('1'=>array('selected'=>true))));
        ?>
        <span class="help-inline">
        <?php echo $form->error($model,'activate'); ?>
        </span>

<br /><br />

<h3 class="heading">Distribution Item</h3>

<table class="form-table" id="customFields">
    <tr valign="top" style="text-align:center;">
        <td style="font-weight:bold;">Type</td>
        <td style="font-weight:bold;">Item</td>
        <td style="font-weight:bold;">Count</td>
        <td style="font-weight:bold;">Alocation</td>
    </tr>
    <tr valign="top">
        <td>
        <select class="big" id="data1_1" name="data1_1"></select>
        <input type="hidden" value="1" name="rows[]" id="rows1_1">
        </td>
        <td><select class="small" id="data2_1" name="data2_1"></select></td>
        <td><input type="text" class="mini" id="data3_1" name="data3_1" autocomplete="off"/></td>
        <td><input type="text" class="mini" id="data4_1" name="data4_1" autocomplete="off"/>K+</td>
        <td><input type="text" class="mini" id="data5_1" name="data5_1" autocomplete="off"/></td>
    </tr>
</table>
<a href="javascript:void(0);" class="btn btn-warning">Tambah Data</a>
<!--<a href="javascript:void(0);" class="btn btn-danger">Cek</a>-->
</div>