При повторных поисках элементов из списка они дублируются

При повторном вводе символов в поле для поиска города, города которые попали под филтрацию дублируются. Подскажите как это исправить на JQuery.

<div class="search__city">

    <input type="text" name="choice__city" id="choice__city" placeholder="Введите город">

    <div class="dropdown-menu">
        <!-- <a class="dropdown-item"><i class="icon icon-line-circle"></i><span>Ростов</span></a>
        <a class="dropdown-item"><i class="icon icon-line-circle"></i><span>Москва</span></a>
        <a class="dropdown-item"><i class="icon icon-line-circle"></i><span>Анапа</span></a>
        <a class="dropdown-item"><i class="icon icon-line-circle"></i><span>Сочи</span></a> -->
    </div>

</div>

$('input[name="choice__city"]').keyup(function(){

    $('.search__city .dropdown-menu').css('display', 'flex');
    var value = $(this).val().toLowerCase(); //3

    let dataList = {};
    fetch('../russia.json').then( response=> {
        return response.json()
    }).then(
        json=> {
            dataList = json;
            for(let i = 0; i < dataList.length; i++){
                $('.search__city .dropdown-menu').append(`<a class="dropdown-item"><i class="icon icon-line-circle"></i><span>${dataList[i].city}</span></a>`)
            }
        }
    )

    if($(this).val() == ""){
        $('.search__city .dropdown-menu').css('display', 'none');
    }

    $(".search__city .dropdown-menu .dropdown-item").filter(function() { //4
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    })

    $(".search__city .dropdown-menu .dropdown-item span").on('click', function(e){
        var target = $(e.target);
        if (target.is('span')) {
            $('input[name="choice__city"]').val(target.text());
        }
        $('.search__city .dropdown-menu').css('display', 'none');
    })
})