Hello everyone when I click on button repeat, the form is repeating.

In this form I am using bootstrap color picker but when form repeat color picker not works in repeated form. this is my form:
 

<div class="col-sm-12 ">
<hr>
<a href="" class=" btn-po pull-right btn btn-facebook btn-sm" type="button"><i class="fa fa-plus-square"></i> Add PO</a>
<fieldset class="repeat-form" style="width:100%;"><h3>PO# </h3>
<hr> 
<div class="clearfix"></div>

<div class="form-group">
<label class="col-sm-2 control-label">PO Date<span class="symbol required"></span></label>
<div class="col-sm-9">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="checkOutDate" placeholder="">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>



</div>

<div class="form-group">
<label class="col-sm-2 control-label">PO Number<span class="symbol required"></span>

</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="" placeholder="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Factory<span class="symbol required"></span>

</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="" placeholder="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Style Number<span class="symbol required"></span>

</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="" placeholder="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Color<span class="symbol required"></span>

</label>
<div class="col-sm-9">
<div id="cp2" class="input-group colorpicker-component" data-provide="colorpicker"> 
<input type="text" value="#00AABB" class="form-control" /> 
<span class="input-group-addon"><i></i></span>
<div class="colorpicker dropdown-menu colorpicker-with-alpha colorpicker-right colorpicker-hidden" style="top: 351px; left: 673.5px;"><div class="colorpicker-saturation" style="background-color: rgb(0, 234, 255);"><i style="top: 3.13725px; left: 39.2713px;"><b></b></i></div><div class="colorpicker-hue"><i style="top: 48.6254px;"></i></div><div class="colorpicker-alpha" style="background-color: rgb(150, 239, 247);"><i style="top: 0px;"></i></div><div class="colorpicker-color" style="background-color: rgb(150, 239, 247);"><div style="background-color: rgb(150, 239, 247);"></div></div><div class="colorpicker-selectors"></div></div>
</div>
</div>
</div>

<div class="form-group">
<label class="col-sm-2 control-label">Quantity(color wise)<span class="symbol required"></span>

</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="" placeholder="" required>
</div>
</div>

<div class="form-group">
<label class="col-sm-2 control-label">Size Mix(color wise)<span class="symbol required"></span>

</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="" placeholder="Add Size" required>
</div>
<div class="col-sm-5">
<input type="text" class="form-control" id="" placeholder="Add Quantity" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Original Delivery Date<span class="symbol required"></span></label>
<div class="col-sm-9">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="checkOutDate" placeholder="">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>



</div>
<div class="form-group">
<label class="col-sm-2 control-label">Current Delivery Date<span class="symbol required"></span></label>
<div class="col-sm-9">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="checkOutDate" placeholder="">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>



</div>
<div class="form-group">
<label class="col-sm-2 control-label">Lead Time<span class="symbol required"></span> 

</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="" placeholder="" required>
</div>
</div>

<div class="form-group">
<label class="col-sm-2 control-label">Pack type<span class="symbol required"></span> 

</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="" placeholder="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Wash programe 

</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="" placeholder="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Ship Via<span class="symbol required"></span> 

</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="" placeholder="" required>
</div>
</div>

<div class="form-group">
<label class="col-sm-2 control-label">Port Of Export

</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="" placeholder="" required>
</div>
</div>
</fieldset>
</div>
and this is js:
<script>
var count=0;
$('.pull-right').click(function(){
if(count < 10)
{

var lastRepeatingGroup = $('.repeat-form').last();
lastRepeatingGroup.clone().insertAfter(lastRepeatingGroup);

count++;
return false;

}
else{alert("You can add upto 10 record Only"); return false;}

});

// Delete a repeating section

</script>
<script>
$('#cp2').colorpicker();
</script>