Set value to textbox array using jquery

Question

Have the below textbox array

 

<div id="addFruits" style="display:none;">

<div class="input-group col-sm-9 addMore">

<input type="text" class="form-control" name="Fruit[]" placeholder="Fruit" disabled>

<span class="input-group-addon btn-add" onclick="removeThis(this);"><a href="javascript:;">--</a></span>

</div>

</div>

<div class="controls" id="addFruit">

<div class="input-group col-sm-9 addMore">

<input type="text" class="form-control" id="Fruit" name="Fruit[]" placeholder="Fruit">

<span class="input-group-addon btn-add" onclick="addMore('addFruit','addFruits');"><a href="javascript:;">+</a></span>

</div>

</div>

 

Jquery function

 

function addMore(id,colonId)

{

var y =$('#'+id).children().size();

var max_fields=5;

if(y < max_fields){

y++;

$('#'+colonId).children().clone().appendTo('#'+id);

$('#'+id).find('input:disabled').prop("disabled", false);

}

else

{

alert('Limit to add more exceeded!');

}

}

 

Now i have stored the 4 values as comma separated in database

 

Apple,Mango,Orange,Cherry

 

How do i display and fill the 4 textboxes with individual value in it