JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/select2/3.4.0/select2.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/select2/3.4.0/select2.css">
<script src="//cdn.jsdelivr.net/select2/3.4.0/select2-spinner.gif"></script>
<script src="//cdn.jsdelivr.net/select2/3.4.0/select2.png"></script>
<div>
<select id="select2">
    <option ></option>
    <option id="foo">Some Text</option>
    <option id="bar">Other Text</option>
    <option id="bar" >3</option>
    <option id="bar">4</option>
    <option id="bar">5</option>
    <option id="bar" >O6</option>
    <option id="bar">Ot7</option>
</select>

<select id="select3" class="waat">
    <option ></option>
    <option id="foo">Some Text</option>
    <option id="bar">Other Text</option>
    <option id="bar" >3</option>
    <option id="bar">4</option>
    <option id="bar">5</option>
    <option id="bar" >O6</option>
    <option id="bar">Ot7</option>
</select>

<select id="select4">
    <option ></option>
    <option id="foo">Some Text</option>
    <option id="bar">Other Text</option>
    <option id="bar" >3</option>
    <option id="bar">4</option>
    <option id="bar">5</option>
    <option id="bar" >O6</option>
    <option id="bar">Ot7</option>
</select>

<select id="select5">
    <option ></option>
    <option id="foo">Some Text</option>
    <option id="bar">Other Text</option>
    <option id="bar" >3</option>
    <option id="bar">4</option>
    <option id="bar">5</option>
    <option id="bar" >O6</option>
    <option id="bar">Ot7</option>
</select>
</div>
<button id="mybutton">hi</button>

JavaScript

$('select').select2({
    placeholder : "select me" 
});

$( "#mybutton" ).click(function() {    
    $("select").select2('val', '')
});