How to find a parent?

Question

JavaScript

In general, there is such a design.

When you hover over the red side, it expands and the right side narrows, and vice versa.
Everything works as it should.
But if you add one more of the same construction to HTML, it will also expand.
Tell me how to search for a parent, so that when hovering, only the side that the cursor is on expands, and not all that are on the page.

After all, do not write a separate script for each block.

Answer 1

https://api.jquery.com/closest/
can be written more beautifully, but for an example...

$('.left').hover(function() {
    $(this).closest('.dubSec').find('.left').toggleClass('open');
    $(this).closest('.dubSec').find('.right').toggleClass('close');
});

Answer 2

Without js
https://jsfiddle.net/QW01_01/9oe4ne1t/1/