How to connect blocks in this structure so that there is a relationship during hover?

Question

HTML

Hello. The question is very easy in theory, but I'm stupid, so help me.
In general, there is such a structure of elements:

<div class="outer__wrapper">
        <div class="outer__element" id="element-0">Outer Test0</div>
        <div class="outer__element" id="element-1">Outer Test1</div>
        <div class="outer__element" id="element-2">Outer Test2</div>
        <div class="inner__wrapper">
            <div class="inner__element" id="element-0">Outer Test0</div>
            <div class="inner__element" id="element-1">Outer Test1</div>
            <div class="inner__element" id="element-2">Outer Test2</div>
        </div>
</div>

I need to be able to interact with its corresponding inner__element when hovering over each outer_element. That is, for example, when you hover over Outer Test2, the color of Outer Test2 changes
, you need something like this -

#element-*.outer__element:hover ~ .inner__wrapper #element-*.inner__element {
      background-color: red
}

But that won't work, am I right?

Answer 1

I don't know how to make a general entry, but maybe it will help you:
1. One page cannot have the same id.
2. If you write the appropriate id, then the selectors will work like this
https://codepen.io/vxmqzrjw-the-lessful/pen/VwyGyEK