I have method to upload images to Flask in JavaScript. Below is the code used to upload images and display text in chatbot. This is used in my Chatbox class on button click:

For text there is no issue, it's working fine. However when uploading an image, previously uploaded images are getting deleted, ie. the previous img tag src is not visible in the DOM inspector.

var i = 1;
let formData = new FormData();
formData.append('question', $("#question").val());
formData.append('questionImageFile', $("#question-image")[0].files[0]);

let question_id = $("#question").val();
let question_image_file = $("#question-image")[0].files[0];
let msg1;

if ($("#question").val() === "" && $("#question-image")[0].files[0] === "")
  return;  
else if ($("#question").val() != "")
  msg1 = {
    name: "User",
    message: question_id,
    timestamp: new Date().toLocaleTimeString()
  }
else {
  var imgMsg = '<img id="' + i + '"/>'
  msg1 = {
    name: "User",
    message: imgMsg,
    timestamp: new Date().toLocaleTimeString()
  }
}

this.messages.push(msg1);

$.ajax({
  type: "POST",
  url: "/chatbot",
  data: formData,
  cache: false,
  processData: false,
  contentType: false,
  success: (result) => {
    let msg2 = {
      name: "Sam",
      message: result.response,
      timestamp: new Date().toLocaleTimeString()
    };

    this.messages.push(msg2);
    var html = '';
    
    this.messages.slice().reverse().forEach(function(item, index) {
      if (item.name === "Sam") {
        $("#question").val() + '</div>' + '<div class="chatbotResponse"><div class="timeBot">' + new Date().toLocaleTimeString() + '</div>' + result.response + '</div>'
        html += '<div class="messages__item messages__item--visitor">' + '<div class="timeBot">' + item.timestamp + '</div>' + item.message

        if (item.message.startsWith("Sorry, I")) {
          html += '<button type="button" class="btn btn-outline-primary" id="feedbackBtn" data-toggle="modal" data-target="#exampleModal">Go to feedback form</button>'
        }

        html += '</div>'
      } else {
        html += '<div class="messages__item messages__item--operator">' + '<div class="timeUser">' + item.timestamp + '</div>' + item.message + '</div>'
      }
    });
    
    const chatmessage = chatbox.querySelector('.chatbox__messages');
    chatmessage.innerHTML = html;
    if (formData.get('questionImageFile')) {
      console.log(i)
      var output = document.getElementById(i);
      output.src = window ? .URL ? .createObjectURL(formData.get('questionImageFile'));
      i = i + 1;
    }
    // $("#question").val()
    $("#question").val("");
  },
  error: function(result) {
    alert('error');
    this.updateChatText(chatbox)
    $("#question").val("");
  }
});