حلقه لوپ پی اچ پی و جاوااسکریپت

سلام
داخل php

@forelse($categories as $category)

                <div class="CatImg">
                    <img src="{{ $category->imgUrl }}" class="categoriesImagesSize" alt=""
                         data-id="{{ $category->id }}">
                    <div class="CatName">{{ $category->name }}</div>
                </div>

            @empty

            @endforelse

این کد این معنی رو میده که به ازای هر category یک div با کلاس catimg ایجاد کن و داخلش محتویات را بگذار

حالا من اومدم داخل جاوااسکریت

success: function (json) {
                            data = jQuery.parseJSON(json);
                            $('.categoriesResult').text('');
                            $.each(data, function (key, categories) {
                                $('.categoriesResult').append('<div class="elements"></div>');
                                $('.elements').append('<img src="' + categories.imgUrl + '" class="">');
                                $('.elements').append('<div class="">' + categories.name + '</div>');

                            });

ولی نتیجه یکسان نیست
مثلا ما 5 نتیجه را برگرداندیم
میاد
5 تگ با کلاس element ایجاد میکند
و داخل اولی
نتیجه 1 تا 5 را نشان میدهد
داخل دومی
2 تا 5
داخل سومی
3 تا 5
داخل چهارمی
4 و 5
داخل پنجمی
نتیجه 5 را نشان میدهد
مشکل کار چیه ؟
من میخوام دقیقا عین مثال php بشه