JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<form> Translate to:
<select class="ui fluid search dropdown" multiple="" id='languages' name='languages'>
<option value='Chinese (Simplified)'>Chinese (Simplified)</option>"
<option value='Hmong'>Hmong</option>"
<option value='Spanish'>Spanish</option>"
<option value='Arabic'>Arabic</option>"
</select> </form>
<button onclick='sample()'>Save Preferences</button>

JavaScript

let ar = [];
$('#languages').dropdown({
  onChange: function (value) {
    const obj1 = ar.reduce((o, e) => (o[e] = true, o), {});
    const obj2 = value.reduce((o, e) => (o[e] = true, o), {});
    value.forEach(e => {
      if (!obj1[e]) ar.push(e);
    });
    ar.forEach(e => {
      if (!obj2[e]) ar.splice(ar.indexOf(e), 1);
    });
  }
});

function sample() {
  console.log(ar);
  alert(JSON.stringify(ar));
  // google.script.run.getData(ar);
}