I am retrieving items from a list and want only 4 to show on my page

JavaScript
1

I am retrieving items from a list, which has 5 items, but I only want 4 to show and every time I add a new item I want the new item to show first and then the other 3 items to follow and the fifth item must not show.

<div id="phishing" class="row">
<!--Injected content-->
</div>

$.ajax({
        url: "/cyberSecurity/_api/web/lists/GetByTitle('phishingExamples')/items",
        method: 'GET',
        headers: {
            'Accept': 'application/json; odata=verbose'
        },
        success: function(data) {
            var items = data.d.results;
            var phishing = $('#phishing');
            var phishingCards;
            for (var i = 0; i <4; i++) {
                phishingCards = '<div class="col-sm-6 col-md-6 col-lg-3 mb-3">' +
                   '<div style="background-color: #004685; height: 340px; position: relative;" class="card backImg2 ">' +
                    '<div style="color: #fff;" class="card-body ">' + 
                    '<h5 style="color: #ffe01a;" class="card-title ">' + items[i].Title + '</h5>' +
                    '<p style="margin-bottom: -5px;" class="card-text ">' + items[i].Description + '</p>' +
                    '<div style="width: 100%;  margin: 0 auto; position: absolute; bottom: 0;right: 0" class="row "><a style=" background-color: #ffe01a!important;  color: black!important; border: none; width: 100%;" href= "'+ items[i].Image.Url +'"class="btn btn-primary btn-sm"  target=_blank>More Info</a></div>' +
                    '</div>' +
                    '</div>' +
                    '</div>';                

                phishing.prepend(phishingCards);
            }
        },
        error: function(data) {
            console.log('Error: ' + data);
        }
    }); // End Service Icons  //End Service Icons
[![Items from list][1]][1]