Synchronous problem with ajax - Quote Machine

Hi, I have the following code:

    //GET QUOTE WHEN BUTTON IS CLICKED
    jQuery('#button').on('click', function(){
        
        jQuery.ajax({
        url: "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback",
        type: 'GET',
        dataType: "jsonp",
        }); 
    
        function mycallback(json){
        document.getElementById('quote').innerHTML = json[0].content;
        
        };
        
        var quote = document.getElementById('quote').innerHTML;
        document.getElementById('anchor').href =  'https://twitter.com/intent/tweet?text=' + quote;
    })

The code works fine. My problem is: when I get the quote inside the quote ID at the end of the code, it gets the previous quote, and not the current one showing on the screen. I know this happens because the mycallback function takes more time and the code jumps to the next part of the code, but I don’t know how to fix it. I’ve tried the then() method, but it didn’t work. Could somebody help me please? All day stuck on it.

Why not put that part of the code in the callback is well?

I’ve tried that Ben, but the it doesn’t work. Do you know any other way?

Simple working example: https://codepen.io/benjaminvanzwienen/pen/LeqOBG

The dataType: ‘jsonp’ and the callback are not necessary. You can use dataType: ‘json’, but make sure you add cache: false so you get a new quote each time instead of same one after the first click of the button.

  $.ajax({
    url:
      "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1",
    type: "GET",
    dataType: "json",
    success: function(json){
      document.getElementById("quote").innerHTML = json[0].content;
      document.getElementById("anchor").href =
    "https://twitter.com/intent/tweet?text=" + json[0].content;
    }
  });