How to loop array in jQuery?

example 1:

var crops = ["rice","wheat","turmeric","coconut"];
$.each(crops,function(){
var crop_id = this+"_id";
alert($("#"+crop_id).val());
});

example 2 :

Rice :
Dhal :
Green Dhal :
Total:

code:

Rice : <input type="text" name="grocery" id="rice_id" value="40">
Dhal : <input type="text" name="grocery" id="dhal_id" value="100">
Green Dhal : <input type="text" name="grocery" id="greendhal_id" value="90">

<script>
$("#total_cal").click(function() {

total = 0;
$("input[name='grocery[]']").each(function() {
total = parseFloat(total)+ parseFloat($(this).val());
});

$("#total_id").html(total);

});
</script>