JQuery AJAX function not passing new variable value to global scope

Question

Good afternoon, I am new to programing and have been having problems making a javascript/jquery API call load to a Twitter Tweet. The goal is to be able to hit the Tweet button and send the current quote featured on the page in a Tweet. This is my current attempt on CodePen with the Javascript below;

var counter = 0;
var $body = $('body'),
redVal = 55,
greenVal = 50,
blueVal = 25,
quote;

var sendText = "something current...";  //this is the variable that should be replaced by the API calls and sent to Twitter


//this is Twitter's function to format the page
window.twttr = (function(d, s, id) {
    var t, js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);
    return window.twttr || (t = {
        _e: [],
        ready: function(f) {
            t._e.push(f)
        }
    });
}(document, "script", "twitter-wjs"));

//the actions to call the quote API
function start() {
redVal = (redVal + 45) % 255;
greenVal = (greenVal + 40) % 255;
blueVal = (blueVal + 20) % 255; 
var colorVal = "rgba(" + redVal + "," + greenVal + "," + blueVal + ", 0.4)";
$body.css({"background-color": colorVal });


if (counter % 2 == 0) {
   $.ajax({
       url: "http://quotes.stormconsultancy.co.uk/quotes/random.json?",
       jsonp: "callback",
       dataType: "jsonp",
       data: {
           q: "id, author, quote",
           format: "json"
       },

       success: function( response ) {
           var quote = response.quote;
           var author = response.author;
           document.getElementById("textDisplay").innerHTML = quote;
           document.getElementById("author").innerHTML = author;
           passText(quote);
       }
    }); 
   counter += 1; 
} else {     $.ajax({
       url: "http://api.icndb.com/jokes/random?",
       jsonp: "callback",
       dataType: "jsonp",
       success: function( response ) {
           var quote = response.value.joke;
           var author = " ";
           document.getElementById("textDisplay").innerHTML = quote;
           document.getElementById("author").innerHTML = author;
           passText(quote);
       }
    }); 
   counter += 1;
}
}

//my attempted helper function to pass the quote values
function passText(superT) {
    console.log(superT);
    sendText = superT;
    return sendText;
    }

//the API call to Twitter to send the Tweet 
twttr.ready(function (twttr) {
    twttr.events.bind('tweet', 
        twttr.widgets.createShareButton(
        'https://dev.twitter.com/',
        document.getElementById('container'),
        {
        text: sendText }
        ));
})

I think the issue is that the API calls as conducted in the jQuery AJAX script are not being recognized as a reassignment to the quote variable in a way that is accessible outside of the jQuery AJAX call. I read other suggestions ( example ) to try and assign the quote variable from global scope or pass the value through a helper function ( example, as I attempted above…), but both just send the value initially assigned to the quote variable to the Twitter API without the JQuery values.

I hope there is something simple that I don’t know that will get this working. If it is not an issue with the scope of the variable, or if there is a better way to approach this than the JQuery AJAX function I would appreciate any suggestions. Thank you for your time and any help.