demo

<div class="row">
        
            @php $i = 0; @endphp
            @foreach($blogs as $data)
              <div class="col-md-6 blog-item" style="@if($i >= 4) display: none; @endif">
                <div class="card mb-3" style="max-width: 540px;">
                  <div class="row g-0 align-items-center">
                    <div class="col-md-6">
                      <img src="{{ asset('images/blogs/' . $data->image) }}" class="img-fluid rounded-start" alt="image">
                    </div>
                    <div class="col-md-6">
                      <div class="card-body">
                        <h5 class="card-title">{{ $data->title }}</h5>
                        <p class="card-text">
                          <small class="text-body-secondary">{{ $data->created_at }}</small>
                        </p>
                        <a href="{{ url('blog', $data->id) }}" class="btn btn-primary-2">READ MORE</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              @php $i++; @endphp
            @endforeach
            
            <div class="text-center"><a href="#" id="loadMore" class="btn btn-primary-2 mt-3">Load More</a></div>
            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
            <script>
              $(document).ready(function() {
                let itemsToShow = 4;
                let totalItems = $('.blog-item').length;
            
                $('#loadMore').click(function(e) {
                  e.preventDefault();
                  itemsToShow += 4;
                  $('.blog-item').slice(0, itemsToShow).slideDown();
            
                  if (itemsToShow >= totalItems) {
                    $('#loadMore').hide();
                  }
                });
              });
            </script>

</div>