JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div>
    <select>
        <option>Undefined</option>
        <option>Test 1</option>
        <option>Test 2</option>
        <option>Test 3</option>
    </select>
    <button id="planer-button" class="btn btn-success">Add to<br/> planer!</button>
</div>

CSS

div{
    position:relative;
}
.nop{
    padding: 5px;
}
#planer-button{
    font-weight: bold;
    width:75px;
    height:75px;
    z-index: 1;
    position: absolute;
    left: 0px;
    top: 0px;
}
select{
    z-index:0;
    height:20px;
    width:75px;
    position: absolute;
    top: 55px;
}

JavaScript

var openSelect = function(selector){
     var element = $(selector)[0], worked = false;
    if (document.createEvent) {
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        worked = element.dispatchEvent(e);
    } else if (element.fireEvent) {
        worked = element.fireEvent("onmousedown");
    }
    if (!worked) {
        console.log("nope!");
    }   
}
$('#planer-button').click(function(){ 
   openSelect('select'); 
});
$('#planer-button').hover(function(){ 
    $('#planer-button').html("<img style='width:100%;' src='http://lorempixel.com/100/100/' />");
    $('#planer-button').addClass('nop');
});
$('#planer-button').mouseleave(function(){ 
    $('#planer-button').html("Add to<br/> planer!");
    $('#planer-button').removeClass('nop');
});

$('select').change(function(){
    alert($(this).val());
});