JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-git.js"></script>
<div id="todaysrate">Today's rate (<span class="date"></span>) for <span class="pair"></span> is 1.00/<span class="rate"></span>
</div>
<div id="bestrate">Best rate (<span class="date"></span>) for <span class="pair"></span> is 1.00/<span class="rate"></span>
</div>
<div id="error">
</div>
<div id="refresh">
  Refresh
</div>

CSS

span {
  font-weight: bold;
  color: #f00;
}

#refresh {
  display: inline-block;
  color: white;
  background: gray;
  padding: 5px 7px;
  margin-top: 10px;
  cursor: pointer;
}

JavaScript

function doexchange(exchangepair) {
  // added `return`
  return $.ajax({
    url: 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22' + exchangepair + '%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback='
  }).then(successCallback);
}

function successCallback(responseObj) {
  var stringObj = JSON.stringify(responseObj),
    exchange = JSON && JSON.parse(stringObj) || $.parseJSON(stringObj),
    exchangepair = exchange.query.results.rate.id,
    exchangerate = parseFloat(exchange.query.results.rate.Rate).toFixed(2),
    exchangedate = exchange.query.results.rate.Date;
  $('#todaysrate').find('.pair').html(exchangepair);
  $('#todaysrate').find('.rate').html(exchangerate);
  $('#todaysrate').find('.date').html(exchangedate);
  // added `return`
  return exchangerate
}

function getbestexchange(exchangepair) {
  // added `return`
  return $.ajax({
    type: "GET",
    url: "http://chiennuperou.com/besthistoric" + exchangepair + ".xml",
    dataType: "xml"
  }).then(function(xml) {
  	alert('Hey, I\'m working!');
    bestpair = $(xml).find('pair').text();
    bestrate = $(xml).find('rate').text();
    bestdate = $(xml).find('date').text();
    $('#bestrate').find('.pair').html(bestpair);
    $('#bestrate').find('.rate').html(bestrate);
    $('#bestrate').find('.date').html(bestdate);
    // added `return`
    return bestrate
  });
};

$.when(doexchange( /* value */ ), getbestexchange( /* value */ ))
  .then(function(exc, bestexc) {
    // do comparision stuff
    console.log(exc[0], bestexc[0])
  }, function err(jqxhr, textStatus, errorThrown) {
    $('#error').html(errorThrown);
    console.log(errorThrown)
  })

$('#refresh').click(function() {
  $('#todaysrate').find('.pair').html('. . .');
  $('#todaysrate').find('.rate').html('. . .');
  $('#todaysrate').find('.date').html('. . .');
  $('#bestrate').find('.pair').html('. . .');
  $('#bestrate').find('.rate').html('. ....