новые добавленые елементы в список не удаляються

елементы которые изначально были добавлены в список удаляються без проблем, но элементы которые после выбора(клик по нужной панели) идут в список, и при клике у них на Х не удаляються, почему это происходит и как можно это исправить? html:

<div class="table-list" id="tableList">
<div class="list-item">
                                <a href="#" class="list-link">
                                    <div class="header-item">
                                        <p>001</p>
                                    </div>
                                </a>
                                <div class="footer-item">
                                    <span class="btn-add"><i class="fa fa-plus" aria-hidden="true"></i></span>
                                </div>
                            </div>
<div class="list-item">
                                <a href="#" class="list-link">
                                    <div class="header-item">
                                        <p>002</p>
                                    </div>
                                </a>
                                <div class="footer-item">
                                    <span class="btn-add"><i class="fa fa-plus" aria-hidden="true"></i></span>
                                </div>
                            </div>
</div>

js:

$("#tableList .btn-add").click(function() {
        var icon = $(this).find("i").removeClass("fa fa-plus").addClass("fa fa-check").css("color", "#008000");
        var elemNum = $(this).parent().siblings(".list-link").find(".header-item p").text();
        var li = $("#codesList").append("<li>" + "<span>" + elemNum + "</span>" + "<span class='btn-list-close'>&#10006;</span>" + "</li>");
    });
});
$("#codesList li .btn-list-close").click(function() {
        $(this).parent().remove();
});