API call for each using JS

I am using Google API and JS click outside to convert the first input into targeted language.

I want to convert into multiple language from first input, I have added another Targeted language as URDU.

I need in such a way, when I give input in first box, it gets converted into Spanish as well as Urdu.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let $ = el => document.querySelector(el);

$('#input').addEventListener('keyup', function() {
  var text = this.value;
  doGet(text);
}, false);

function doGet(txt) {
  var sourceText = txt;  
  var sourceLang = 'en';
  var targetLang = $(".targee").value;
    
  var url = "https://translate.googleapis.com/translate_a/single?client=gtx&sl=" 
            + sourceLang + "&tl=" + targetLang + "&dt=t&q=" + encodeURI(sourceText);
  
  $('.translated').value = 'LOADING...';
  var request = new XMLHttpRequest();
  request.open('GET', url, true);

  request.onload = () => {
    if (request.status >= 200 && request.status < 400) {
      // Success!
      let data = JSON.parse(request.responseText);
      let finaltext = '';
      for (let i = 0; i < data[0].length; i++) {
        finaltext += data[0][i][0];
      }
      $('.translated').value = finaltext;
    }
  };
  request.send();
}

<!-- language: lang-css -->

h2, h3 {
  margin: 0 auto;
}
.boxes {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  max-width: 1000px;
  margin: 0 auto;
}
.box {
  width: 40%;
}

textarea {
  display: block;
  width: 100%;
  min-height: 160px;
  margin: 5px auto 20px;
  border-width: 2px;
  resize: none;
  
  &:focus {
    border: 2px solid black;
    outline: none;
  }
}
.btn-row {
  text-align: center;
  margin: 10px auto;
}

<!-- language: lang-html -->

  <div class="boxes">
    <div class="box">
      <h2>Input</h2>
      <input id="input">
    </div>
    
    <div class="box">
      <h2>Spanish</h2>
      <input value="es" class="targee">
      <input id="es" class="translated">
    </div>
    
    <div class="box">
      <h2>Urdu</h2>
      <input value="ur" class="targee">
      <input id="ur" class="translated">
    </div>
  
  </div>

<!-- end snippet -->

If you want to use the google translate API for multi-languages, you can loop the request to the API URL. To avoid errors in data synchronization, you can use Javascript Promise and async function.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let $ = el => document.querySelector(el);
let $$ = el => document.querySelectorAll(el);
$('#input').addEventListener('keyup', function() {
var text = this.value;
doGet(text);
}, false);
async function doGet(txt) {
var sourceText = txt;  
var sourceLang = 'en';
var targetLangs = $$(".targee");
var request;
var url; 
for(var j = 0; j < targetLangs.length; j++) {
url = "https://translate.googleapis.com/translate_a/single?client=gtx&sl=" 
+ sourceLang + "&tl=" + targetLangs[j].value + "&dt=t&q=" + encodeURI(sourceText);
$$('.translated')[j].value = 'LOADING...';
$$('.translated')[j].value = await translate(url);
}
}
async function translate(url) {
return new Promise((resolve, reject) => {
request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = () => {
if (request.readyState == 4 && request.status >= 200 && request.status < 400) {
// Success!
let data = JSON.parse(request.responseText);
if(data[0]) {
let finaltext = '';
for (let i = 0; i < data[0].length; i++) {
finaltext += data[0][i][0];
};
resolve(finaltext);
} else {
resolve('');
}
} else {
// Error!
reject("error: "+request.statusText);
}
};
request.send();
});
}

<!-- language: lang-css -->

h2, h3 {
  margin: 0 auto;
}
.boxes {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  max-width: 1000px;
  margin: 0 auto;
}
.box {
  width: 40%;
}

textarea {
  display: block;
  width: 100%;
  min-height: 160px;
  margin: 5px auto 20px;
  border-width: 2px;
  resize: none;
  
  &:focus {
    border: 2px solid black;
    outline: none;
  }
}
.btn-row {
  text-align: center;
  margin: 10px auto;
}

<!-- language: lang-html -->

  <div class="boxes">
    <div class="box">
      <h2>Input</h2>
      <input id="input">
    </div>
    
    <div class="box">
      <h2>Spanish</h2>
      <input value="es" class="targee">
      <input id="es" class="translated">
    </div>
    
    <div class="box">
      <h2>Urdu</h2>
      <input value="ur" class="targee">
      <input id="ur" class="translated">
    </div>
  
  </div>

<!-- end snippet -->