JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<div class="imput-box">
<input type="text" placeholder="Type answer..."/>
<img class="img-click" src="http://www.drak.cz/web/templates/rt_maelstrom_j15/images/icons/otaznik.png"/>
<div class="moznosti">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</div>
<div class="imput-box">
<input type="text" placeholder="Type answer..."/>
<img class="img-click" src="http://www.drak.cz/web/templates/rt_maelstrom_j15/images/icons/otaznik.png"/>
<div class="moznosti">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</div>
<div class="imput-box">
<input type="text" placeholder="Type answer..."/>
<img class="img-click" src="http://www.drak.cz/web/templates/rt_maelstrom_j15/images/icons/otaznik.png"/>
<div class="moznosti">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</div>
<div class="imput-box">
<input type="text" placeholder="Type answer..."/>
<img class="img-click" src="http://www.drak.cz/web/templates/rt_maelstrom_j15/images/icons/otaznik.png"/>
<div class="moznosti">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</div>
</form>
CSS
.imput-box {
width: 82%;
margin: 10px 0px 10px 0px;
height: 35px;
position: relative;
}
.imput-box input {
width: 100%;
height: 100%;
}
.imput-box img {
cursor: pointer;
position: absolute;
top: 0px;
bottom: 0px;
margin: auto;
right: 15px;
}
.moznosti {
position: absolute;
width: 100%;
background: rgb(191, 191, 191);
min-height: 40px;
display: none;
z-index: 99;
}
.moznosti.active{
display: block;
}
JavaScript
$(document).ready(function(){
$('.img-click').click(function(){
$('.moznosti').removeClass('active');
$(this).next('.moznosti').addClass('active');
})
});