Create form hidden inputs from jquery object(array)

I have created a jquery object (array) of items in a parent page which is passed into an iframe. Example code used is something like:

<script type=“text/javascript”>
$(document).ready(
function()
{
$.SiteInfo = {custLabels:[{‘xx_fruit’:varFruit},{‘xx_vegetable’:varVegetable },{‘xx_car’:varCar },{‘xx_plane’:varPlane }]};

    }
);

</script>

What I’m trying to do in the iframed page containing a form is to also create hidden input fields with the custLabels so it will look like:

<INPUT TYPE=“HIDDEN” NAME=“xx_fruit” VALUE=“custLabels(xx_fruit)”>
<INPUT TYPE=“HIDDEN” NAME=“xx_vegetable” VALUE=“custLabels(xx_vegetable)”>
<INPUT TYPE=“HIDDEN” NAME=“xx_car” VALUE=“custLabels(xx_car)”>
<INPUT TYPE=“HIDDEN” NAME=“xx_plane” VALUE=“custLabels(xx_plane)”>

So an example output would be (assuming varFruit is apple, varVegetable is carrot and so on…):

<INPUT TYPE=“HIDDEN” NAME=“xx_fruit” VALUE=“apple”>
<INPUT TYPE=“HIDDEN” NAME=“xx_vegetable” VALUE=“carrot”>
<INPUT TYPE=“HIDDEN” NAME=“xx_car” VALUE=“ford”>
<INPUT TYPE=“HIDDEN” NAME=“xx_plane” VALUE=“airbus”>

Could you possibly help on how I can get this data out of the object and into the separate fields? My JavaScript is not very good.