Как я могу динамически скрывать элементы с помощью javascript?

if (fbValue.job_requested) {
    var driver_id = fbValue.driver_id;
    var driver_name = fbValue.driver_name;
    var requested = fbValue.job_requested;
    var time = "00:00";
    var list_id = "list"+driver_id;
    
    if (fbValue.job_requested) {
        time = fbValue.job_requested_time;
    }

    if (requested == "Yes") {
        console.info("test1");
        console.info($("#bubble").is(':hidden'));

        var bubble = "<div class= 'bubble' style=top:" + counter * 100 + "px';>"+driver_name+"<br>"+time+"<a id='"+driver_id+"' class='homeDriver'><span class='icon home'></a></span><a id='"+driver_id+"' class='notifyDriver'><span class='icon comments'></a></span><a id='"+driver_id+"' class='pauseDriver'><span class ='icon pause'></a></span><a id='"+driver_id+"' class='show'><span class='icon list'></a></span><a id = 'close'><span class ='icon close'></span></a></div>";

        var smsBubble = "<div class='smsBubble' id = 'smsBubble'><span class ='icon notifyComments'></span>"+driver_name+"<input type = 'text' class='textNotify' id='message'/><span class ='icon notifyClose'></span><div class='buttons'><a id = '"+driver_id+"'><button class='btn-sendClose'>Send & Close Card</a></button><a id = '"+driver_id+"' class ='sendSms'><button class='btn-send'>Send</a></button></div></div>";

        var pauseBubble = "<div class='pauseBubble' id = 'pauseBubble'><span class ='icon notifyPause'></span>"+driver_name+"<span class ='icon homeClose'></span><a id = '"+driver_id+"' class ='sendPause'><button class='btn-send'>Send</a></button></div></div>";;

        var homeBubble = "<div class='homeBubble' id = 'homeBubble'><span class='icon notifyHome'></span>"+driver_name+"<span class= 'icon notifyClose'></span><div class='buttons'><a id = '"+driver_id+"' class ='sendHome'><button class='btn-send'>Send</a></button></div></div>";

        $("#driverBubble").append(bubble);
        counter++;

        $('body').on('click','.notifyDriver', function(){
            $("#notifyBubble").append(smsBubble);
        })

        $("#close").click(function(){
            $("#driverBubble").hide();
        });

        // Ajax call to send custom message
        $('body').on('click','.sendSms',function(){
            var did = this.id;
            var message = $("#message").val();

            $.ajax({
                url:'sendnews',
                type:'GET',
                success:function(data){
                    $("#smsBubble").hide();
                },
                data: {
                    data: did, message
                }
            });
        });

Я пытаюсь понять, как «скрыть» мой элемент Bubble. У каждого пузыря есть кнопка X. Я использовал функцию .hide() и отображал этот элемент, когда был отправлен другой запрос, но проблема, с которой я столкнулся, заключается в том, что когда я отправляю другой запрос, он создает новый пузырь, а затем показывает первый. Таким образом, он в основном дублирует себя каждый раз, когда я отправляю новый запрос, используя это.

Я думал, что мне может понадобиться использовать цикл Foreach. Но я не уверен. Любая помощь приветствуется!