Add Remove dynamically by Jquery

Question

I just read and get this link http://jsfiddle.net/vh3Js/2/, but I still get stuck. Compare to those link, here's mine.

<script type="text/javascript">
var $ = jQuery.noConflict();
$(document).ready(function() {
    var inputs = 1; 
    
    $('#btnAdd').click(function() {
        $('.btnDel:disabled').removeAttr('disabled');
        var c = $('.clonedInput:first').clone(true);
            c.children(':text').attr('name','qty'+ (++inputs) ).val('');
            c.children(':button').attr('name','btnDelete'+ (inputs) );
        $('.clonedInput:last').after(c);
    });
    
    $('.btnDel').click(function() {
        if (confirm('are you sure to delete this line? this action cannot be undone!')) {
            --inputs;
            $(this).closest('.clonedInput').remove();
            $('.btnDel').attr('disabled',($('.clonedInput').length  < 2));
            fixNames();
        }
    });
    
    function fixNames(){
        var i = inputs;
        while(i--) {
            $('input:text')[i].name = 'qty'+ (i+1);
            $('input:button')[i].name = 'btnDelete'+ (i+1);
        }
    }
    
});
</script>

<!-- Add an Item Line start here -->
<div class="clonedInput">

<div class="form-group has-success col-xs-6">
  <label>Item Name</label>
  <input type="text" class="form-control" name="item_name" placeholder="what kind of item is this?"/>
</div>

<div class="form-group has-success col-xs-6">
  <label>Remarks</label>
  <input type="text" class="form-control" name="remarks" placeholder="what purpose of this item?"/>
</div>

<div class="form-group has-success col-xs-6">
  <label>Item Specification</label>
  <textarea class="form-control" name="spec" rows="2" placeholder="insert your item specifications ... "></textarea>
</div>

<div class="form-group has-warning col-xs-6">
  <label>Service Detail</label>
  <textarea class="form-control" name="service_desc" rows="2" placeholder="please fill this field if your requested for service!"></textarea>
</div>

<div class="form-group has-success col-xs-1">
  <label>Qty</label>
  <input type="text" class="form-control" name="qty1" data-inputmask='"mask":"999"'data-mask/>
</div>

<div class="form-group has-success col-xs-2">
  <label>Unit</label>
  <select class="chosen-select" style="width:130px;" tabindex="2" name="unit">
  <?php foreach ($unit as $row) { ?>
  <option>
  <option value="<?php echo $row -> desc; ?>"> <?php echo $row -> desc; ?>  </option>
  </option>
  <?php } ?>
  </select>
</div>

<div  class="form-group has-success col-xs-3">
  <label>Expect Date Delivery</label>
  <div class="input-group">
  <div class="input-group-addon">
    <i class="fa fa-calendar"></i>
  </div>
  <input id="reservation" type="text" class="form-control pull-right" name="expect_delv_date"/>
  </div>
</div>

<div class="form-group has-success col-xs-3">
  <label for="exampleInputFile">Add an attachment?</label>
  <input id="exampleInputFile" type="file" name="attach">
  <p class="help-block">max file size is 5MB</p>
</div>

<input type="hidden" name="req_by" value="<?php echo $user ['real_name'];?>" />
<input type="hidden" name="pr_id" value="<?php echo "$pr_id";?>" />

<div>
<div class="form-group col-xs-3 ">
  <div class="btn btn-danger btn-block btnDel" name="btnDelete1" disabled="disabled"><i class="fa fa-minus-square"></i> &nbsp;delete this item !</div>
</div>
</div>

</div>
<!-- Add an Item Line end here -->

<div class="form-group col-xs-4">
  <div class="btn btn-block btn-primary" id="btnAdd"><i class="fa fa-plus-square"></i> &nbsp;add more line(s) </div>
</div>

I, think my problem is masked or scripted div in a div ... :(