Javascript : Nested json is not rendering html properly

here is my json object enter image description here

i wrote below code to render the data into the interface

 $.each(data, function (i, item) {

                        branchList.append('<div class="col-sm-6 col-md-6 col-xs-12 col-lg-6">'+
                                            '<div class="card card-default" data-url="'+item.link+'" data-lan="'+item.lan+'" data-lat="'+item.lan+'">'+
                                                '<a href="'+item.link+'" class="card-link">'+
                                            '<span class="card-img">'+
                                                '<div class="branchImgCarousel">'+item.point+' '+ item.point_label+'</div>'+
                                                '<img src="'+item.image+'" alt="" class="img-responsive">'+
                                            '</span>'+
                                            '<span class="card-body">'+
                                                '<span class="h3 heading">'+item.name+'</span>'+
                                                '<span class="h5 heading">'+item.header+'</span>'+
                                                '<p>'+item.sub_header+'</p>'+
                                                    '<ul class="details"></ul>'+
                                            '</span>'+
                                            '<div class="card-footer">'+
                                                '<div class="row">'+
                                                    '<div class="col-xs-2 col-lg-2 col-sm-2 col-md-2">'+
                                                        '<p class="circle">'+ item.distance +' <sup>km</sup></p>'+
                                                    '</div>'+
                                                    '<div class="col-xs-4 col-lg-4 col-sm-4 col-md-4">'+
                                                        '<p class="paddress">'+ item.short_address +'</p>'+
                                                    '</div>'+
                                                    '<div class="col-xs-6 col-lg-6 col-sm-6 col-md-6 img-inline">'+
                                                    '</div>'+
                                                '</div>'+
                                            '</div>'+
                                            '</a></div></div>');
                        $.each(item.feture, function (j, f) {
                            branchList.find('.img-inline').append('<img src="' + f + '" alt="" class="img-responsive">');
                        });
                        $.each(item.offer, function (k, g) {
                            branchList.find('.details').append('<li>'+ g +'</li>');
                        });
                    });

the out put blow is not display what i want.if you see on the red market thats a child of a parent object but its showing for all element.if you seen the json string will see that the red marked text is only belongs to 12th element.so what is wrong with my code.

enter image description here