Почему не работает команда $("#under" + a).detach(); ,a $("under1").detach(); работает

$(function(){
let a = 1;
$("#add").click(function(){
        $("#none").detach()

        $("#spisok").append($("<div>", {"id": "elements" + a, "class": "elements" }))
        $("#elements" + a).css({
            "width": "470px",
            "min-height": "50px",
            "background-color": "white",
            "margin-bottom": "20px"
        })

        $("#elements" + a).append($("<div>", {"id": "headelements" + a}))
        $("#headelements" + a).css({
            "height": "50px",
        })

        $("#headelements" + a).append($("<div>", {"text": $("#datacase").val(), "id": "nameelements" + a}))
        $("#nameelements" + a).css({
            "padding": "14px 5px 5px 20px",
            "float": "left"
        })

        $("#headelements" + a).append($("<img>", {"src" : "delete.png", "class": "delete i" + a}))
        $(".i" + a).css({
            "margin": "18px 0 0 20px"
        })

        $("#headelements" + a).append($("<img>", {"src" : "pp.png", "class": "skr s" + a}))
        $(".s" + a).css({
            "margin": "15px 0 0 20px"
        })
        
        $("#elements" + a).append($("<div>", {"id" : "under" + a, "class": "under"}))
        $("#under" + a).css({
            "min-height": "85px",
            "min-width": "470px"
        })

        $("#under" + a).append($("<hr>"))
        $("hr").css({
            "margin": "0",
            "border-color": "#f7f7f7"
        })

        $("#under" + a).append($("<div>", {"id" : "textelements" + a, "text" : $("#datadescription").val()}))
        $("#textelements" + a).css({
            "padding": "10px 5px 5px 20px",
            "color": "gray",
            "word-wrap": "break-word"
        })
        
        $(document).on("click", ".delete.i" + a, function(){
            $(this).closest(".elements").remove();
        });

        $(document).on("click", ".skr.s" + a, function(){
            $("#under" + a).detach();
        });

        a += 1;
})});