How can I dynamically hide elements using 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.log("test1");
        console.log($("#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
                }
            });
        });

I am trying to figure out how to "Hide" my Bubble element. Each bubble has an X button. I was using the .hide() function and unhiding that element when another request has been sent but the issue I ran into is that when I send another request it creates a new Bubble and then unhides the first one. So its basically duplicating itself each time I send a new request using this.

I thought I might need to use a Foreach loop. But I am not sure. Any help is greatly appreciated!