JS hide/remove dynamically div with same class name

To make it short, I have a table with multiple rows. Beneath each main row I have a hidden row, that when pressed, presents an input to upload files and a button to make the upload. What I am trying to make is show a .gif while its processing the images and removed the .gif when its done so that the user is aware that something is actually happening. Each "upload" row has its own .gif, so when clicking on the upload button the .gif should change from display: none to visible/inline-block. A fetch is done to upload the files and if successful it should remove the .gif, the only problem is that the js does not remember the rest first .gifs.

Ill attach some images and then the js code.

Here you can see, if you press on the + sign, it shows the row beneath it, while row with ID 4 and 5 are hidden because the button was not pressed.

Here is during the upload process, what happens when I click on Upload, the .gif is added.

In this third one, all 3 were already done since I have an alert as a confirmation for debug purpose. Though you can see that only one disappeared and the rest still have the .gif visible. What I want is that as soon as the response from the fetch is ok, it should remove the respective .gif, though I have no clue on how to tackle this or even how to start. I thought maybe about an array that stores which ones were received through a data-* but then it did not make sense since i would need to send response from the server with that number.

The code:

function uploadPhotos(url, queryCollection){
    this.url = url;
    this.queryCollection = queryCollection;

    this.upload = function(){
        queryCollection.forEach(function(el){
            el.addEventListener('submit', e => {
                loadingGifEl = el.nextElementSibling;
                button = el.closest('form').querySelector('input[type=submit]');
                e.preventDefault();
                if (loadingGifEl.classList.contains('hidden')) {
                    loadingGifEl.classList.remove('hidden');
                    button.classList.add('hidden');
                }
                 const files = el.querySelector('[type=file]').files;
                // const contentID = el.closest('tr').getAttribute('data-content-id');
                if(el.closest('tr') == null){
                    var contentID = 0;
                }else{
                    var contentID = el.closest('tr').getAttribute('data-content-id');
                }
                let formData = new FormData();

                for (let i = 0; i < files.length; i++) {
                    let file = files[i];
                    formData.append('image_field[]', file, contentID + '___' + file.name);
                }
                /* Original working */
                fetch(url, {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.text())
                .then(data => {
                    if (this.button.classList.contains('hidden')) {
                        this.loadingGifEl.classList.add('hidden');
                        this.button.classList.remove('hidden');
                    }
                    if(Number.isInteger(parseInt(data)) != true)
                        alert('Erro ao inserir na base de dados');

                    console.log(data);
                })
                .catch(function(error){
                    if (this.button.classList.contains('hidden')) {
                        this.loadingGifEl.classList.add('hidden');
                        this.button.classList.remove('hidden');
                    }
                    alert('Erro em fazer upload');
                    console.log(error);
                });
            });
        });
    }
}

How HTML is being built:

            <table class="table table-hover" id="city-table">
            <thead>
                <th>ID</th>
                <th>Nome(PT)</th>
                <th>Descrição(PT)</th>
                <th>Popular</th>
                <th>Adicionado</th>
                <th>Galeria</th>
                <th>Ação</th>
            </thead>
            <tbody>
                <?php
                    $resp = $city->fetchAll();
                    if(!empty($resp)){
                        for($cityCounter = 0; $cityCounter < count($resp); $cityCounter++){
                            switch($resp[$cityCounter]->isPopular){
                                case 0: $isPopular = 'Não';
                                    break;
                                case 1: $isPopular = 'Sim';
                                    break;
                            };
                            echo '<tr data-content-type="city" data-content-id="'.$resp[$cityCounter]->city_link_ID.'">';
                            echo '<td>'.$resp[$cityCounter]->city_link_ID.'</td>';
                            echo '<td>'.$resp[$cityCounter]->nameTranslated.'</td>';
                            echo '<td>'.$resp[$cityCounter]->descriptionTranslated.'</td>';
                            echo '<td>'.$isPopular.'</td>';
                            echo '<td>'.$resp[$cityCounter]->dateCreated.'</td>';
                            echo '<td>
                                    <a class="btn btn-info btn-xs" id="show-gallery" href="#collapseGallery-'.$resp[$cityCounter]->city_link_ID.'" data-toggle="collapse">
                                        <i class="lnr lnr-plus-circle"></i>
                                    </a>
                            </td>';
                            echo '<td>
                                <a href="?edit=city&id='.$resp[$cityCounter]->city_link_ID.'" class="btn btn-info btn-xs pull-left"  style="margin-bottom: 15px"><span class="lnr lnr-pencil"></span></a>
                                <button class="btn btn-danger btn-xs pull-right" id="delete-city"><span class="lnr lnr-trash"></span></button>
                            </td></tr>';
                            echo'
                            <tr data-content-type="city" data-content-id="'.$resp[$cityCounter]->city_link_ID.'" id="collapseGallery-'.$resp[$cityCounter]->city_link_ID.'" class="collapse">
                                <td colspan="14" class="bg-info">
                                    <form enctype="multipart/form-data" method="post" class="file-upload" id="'.$resp[$cityCounter]->city_link_ID.'">
                                        <input type="file" class="btn btn-info pull-left" size="100" name="image_field[]" multiple="multiple">
                                        <input type="submit" class="btn btn-primary pull-right" name="Submit" value="Upload">
                                    </form>
                                    <div class="loading-gif-'.$resp[$cityCounter]->city_link_ID.' hidden">
                                        <img style="margin-left: 25%" src="assets/img/processing.gif" alt="A carregar"/>
                                    </div>
                                </td>
                            </tr>
                            ';
                        }
                    }
                ?>
            </tbody>
        </table>

from JS hide/remove dynamically div with same class name