JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="toggle-content">Show / Hide content</a>
<br/><br/>
<div id="content">
    <img class="close-image" src="http://residentialsearch.savills.co.uk/Content/Images/icon_close.png" />
    <b><u>Content:</u></b><br/>
    This is the info inside the div!
</div>
<br/><br/>
<div id="info">
    <img class="close-image" src="http://residentialsearch.savills.co.uk/Content/Images/icon_close.png" />
    <b><u>Info:</u></b><br/>
    Click the close button to hide this info!
</div>
<hr>
<label for="func">Функция тестирования</label><select id="func">
 			<option value="1">яблоко</option>
			<option value="2">апельсин</option>	
			<option value="3">виноград</option>	
</select>
<hr>
<button id="btnSend">Запрос</button>

CSS

#content{
    border: solid black;   
    width: 70%;
}

#info{
    border: solid red;   
    width: 50%;
}

.close-image{
    display: block;
    float:right;
    position:relative;
    top:-10px;
    right: -10px;
    height: 20px;
}

JavaScript

$(".close-image").click(function() {
    $(this).parent().hide();
});

$("#toggle-content").click(function() {
    $("#content").slideToggle();
});

$("#btnSend").click(function() {
   alert("asas");
   $('#func option[value=2]').prop('selected', true);
   });

$('#func option[value=3]').prop('selected', true);