Target a specific element with the same classes jquery

Question

This is the code at a high level, and there are multiple such lists I have of the following structure:

<li class="wrap-input">
    <p>Some sentence</p>
    <select class="form-control">
      ...
    </select>
    <div class="button-in-input">
      ...
    </div>                                        
</li>
.
.
.

What I want to do is, whenever the user focuses on the "form-control" select, then the div with the "button-in-input" class should be shown, but only in that particular li element . i tried it with this jquery code:

$(".form-control").focusin(function() {
        $(".button-in-input").show();
    }).focusout(function() {
        $(".button-in-input").hide();
    });

But of course, this generalizes to all the li elements I have. I'm assuming there is a way to do it with the this keyword but note that the select and div elements are siblings.
Any help would be appreciated!

PS: I want to avoid using IDs otherwise there would be tons of repetetive code

Answer 1

You can do this with pure CSS.

.wrap-input .button-in-input {
    display: none;
}
.wrap-input select.form-control:focus + .button-in-input {
    disply: block;
}

The select in the second selector is not necessary, but it helps in case there's a different item with the same class.

Answer 2

you can simply use :focus in css to do it, no fancy javascript code needed for this

.form-control:focus + .button-in-input {
    display: block;
}