Using Flask, Jquery, when attempting to set src using attr() call only works some of the time

I have the following code in an HTML file, this is meant to both allow for text to appear and stay on screen, but also for the webpage to play audio, however the audio, around 75% of the time will replay previous audio instead of new audio after submit button is pressed for a second time.

$(document).ready(function(){
        $("#messageArea").on("submit", function(event){
          var rawText = $("#text").val();

          $("#text").val("");
          $("#messageForm").append(rawText + "   ||   ");

          $.ajax({
            cahce:false,
            data:{
              message:rawText,
            },
            type:"POST",
            url:"/getChat",
          }).done(function(data) {
            var botHTML = data
            $("#messageForm").append($.parseHTML(botHTML));
            $('<audio></audio').attr({
              'src':'audio/a1.mp3',
              'volume':0.4,
              'autoplay':'autoplay',
              'controls':'controls',
            });
            console.log("here")
          });

          event.preventDefault();
        });
      });

Here is the function that sends the audio

@app.route("/audio/<filename>")
def sendAudio(filename , methods=['GET', 'POST']):
    print("sending audio", filename)
    return send_file(f"audio/{filename}",mimetype="audio/mpeg")

as shown in the image audio is not called certain times, I believe it has to do with the ajax function, but I am out of ideas

I have tried to alter the caching, alter where it is placed, tried creating a separate ajax GET call, and tried using Flasks for_url function, but none of these have worked