How to correctly refresh multiple divs created by a for loop

The divs that are created like so:

<div class="container-fluid" id="grid">
{% for a,b,c in alphabet %}
<div class="row mx-0 contest">
    <div class="col-12 col-md-12>
    ...
    ...
    </div>
</div>

<div class="row mx-0">
    <div class="col-12 col-md-12>
    ...
    ...
    </div>
</div>
{% endfor %}
</div>

I'd like to refresh only the uppermost row row mx-0 contest& I'm currently using the code below:

$.ajax({
        url: "/route",
        type: "get",
        success: function(data){
            $( '.contest' ).each(function(index) {
                $('.contest').empty();
                $('.contest').load(' .contest > *');
            });
            $(window).scrollTop(scrollPosition); //restore scroll position
        },
        ...
        ...

but I keep ending up with entire list getting duplicated in each uppermost row followed by the second row. I've tried variations that include replaceWith,load& newDom but they all pretty much give the same result. I don't know if I'm correct or not but I assume the duplicates are from the loop even though I've found numerous other posts about duplicates created from a refresh. I make this assumption based on when I refresh the grid by id like so $('#grid').load(" #grid > *"); there's no duplicates but doing so refreshes both rows and I only need the uppermost. Didn't try to refresh uppermost div by id b/c it'll only get the first instance. Any ideas/feedback on how to fix this?