Im trying to assign json data to each div separately i.e. 5 divs using one div structure.

Im trying to assign json data to each div separately i.e. 5 divs using one div structure.

HTML :-
<div class="normal_add_item_box left" id="normal_add_item_box">
<div class="nm_image_area" id="nm_image_area"><img src="images/default.png">
<div class="edit_box" id="edit_box">
             <div class="ed_del_icons" id="ed_del_icons">
<i class="icon-pencil hover_icons" id="nm_edit"></i>
<i class="icon-trash hover_icons" id="nm_delete"></i>
</div> <!-- Close Edit Delete Icons -->
</div>
</div> <!-- close normal image area box -->
<div class="veg_nv" id="veg_nv"><div></div></div>
<div class="nm_name_area" id="nm_name_area"></div>
<div class="nm_price_area" id="nm_price_area"><i class="icon-inr rupee"></i></div>
</div> 

JQUERY :-

$(window).load(function(){
$.post('sample.php',function(data){
var json_length = data.length;
 for(i=0;i<=json_length;i++){
                
$('.nm_price_area').append(data[i].rate);
  $('.nm_name_area').append(data[i].name);
  $('.nm_image_area img').attr('src',data[i].url)
  if(data[i].veg==0){
  $('.veg_nv div').addClass('green');
  }else{
  $('.veg_nv div').addClass('red');
  }
   }
 
 },'json');        
});

JSON :-

[{"id":0,"name":"sample0","rating":2,"rate":1295,"veg":1,"url":"http:\/\/www.domain.com\/Web_Service\/pic10.jpg"},{"id":1,"name":"sample1","rating":4,"rate":1295,"veg":0,"url":"http:\/\/www.domain.com\/Web_Service\/pic10.jpg"},{"id":2,"name":"sample2","rating":0,"rate":1295,"veg":0,"url":"http:\/\/www.domain.com\/Web_Service\/pic10.jpg"},{"id":3,"name":"sample3","rating":3,"rate":1295,"veg":0,"url":"http:\/\/www.domain.com\/Web_Service\/pic10.jpg"},{"id":4,"name":"sample4","rating":2,"rate":1295,"veg":1,"url":"http:\/\/www.domain.com\/Web_Service\/pic10.jpg"}]