JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<div class="column-11 w-col w-col-6"><h4 class="title_text">Song Selection</h4></div>
<div id="song" class="column-12 w-col w-col-6"><select id="song" name="field" class="select-field w-select"><option value="">Select one...</option><option value="GOVTECH">GOVTECH</option><option value="SNDGO">SNDGO</option></select></div>
</div>
<div>
<div class="column-11 w-col w-col-6"><h4 class="title_text">Start Time Selection</h4></div>
<div id="time" class="column-12 w-col w-col-6"><select id="time" name="field" class="select-field w-select"><option value="">Select one...</option><option value="GOVTECH">GOVTECH</option><option value="SNDGO">SNDGO</option></select></div>
</div>
<!-- <div class="column-11 w-col w-col-6"><h4 id="test">hello</h4></div> -->
</body>
</html>
CSS
#wp_bannerize-1 {
background:red;
width:200px;
left:0;
position:absolute;
}
#wp_bannerize-2 {
background:yellow;
width:200px;
right:0;
position:absolute;
}
#ad-notice {
background:#222;
color:white;
}
JavaScript
/* function checkads() {
$('.w-select').each(function(){
if($(this).height() < 50) {
$(this).parent().parent().prepend('<div id="ad-notice">hello</div>');
}
$(this).addEventListener('click', function(){
$(this).parent().parent().prepend('<div id="ad-notice">hello</div>');
});
});
} */
var selectedOptionList = [];
function checkads() {
$(document).on("click", ".w-select", function () {
/* var valueis = document.querySelector('.w-select').id */
/* var stringis = '<div id="ad-notice">' + valueis+ '</div>' */
var idis = this.value;
/* $(this).parent().parent().prepend(this.id) */
var tempSong, tempTime, temp;
if(this.id == 'song' && tempSong === null){
/* var tempSong, tempTime, temp */;
tempSong = this.value;
/* $(this).parent().parent().prepend(tempSong) */;
/* temp[0] = tempSong */
}else if(this.id == 'time' && tempTime === null){
tempTime = this.value;
/* $(this).parent().parent().prepend("-") */
/* temp[1] = tempTime */;
}
/* $(this).parent().prepend(temp+ " ") */
/* selectedOptionList.push(temp) */
/* document.getElementById('song').prepend(tempSong) */
});
}
/* document.getElementById('test').innerHTML = selectedOptionList; */
$(document).ready(checkads);