Цвет заголовков в соответствии с идентификаторами соответствующих кнопок в JQuery

Question

У меня конечное количество кнопок и заголовков,

html:

<button id = "1">1</button>
<button id = "2">2</button>

<heading id="1">heading1  <button>click</button>  </heading>
<heading id="2">heading2  <button>click</button>  </heading>

Мне нужен код jquery такой, что

1. если Я нажимаю кнопку с id = "1", цвет фона кнопки с этим идентификатором должен стать желтым
2. , если я нажимаю кнопку, которая находится внутри тега заголовка id = "1" , кнопка с указанным выше id = "1" должна изменить свой цвет фона на красный.

Я просто взял две кнопки и два заголовка в качестве примера, код должен работать с любым конечным числом кнопок и заголовки.

Answer 1

Как указано в комментариях, id должен быть уникальным, поэтому вместо этого вы можете использовать классы. Попробуйте это:

$('button').click(function(){
     var parentTag = $(this).parent().prop("tagName")
     if(parentTag != "HEADING"){ //outer button
          $(`heading.${$(this).attr('class')}`).css('background-color','yellow');
     }else{
          $(`button.${$(this).parent().attr('class')}`).css('color','red');
     }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="1">1</button>
<button class="2">2</button>

<heading class="1">heading1  <button>click</button>  </heading>
<heading class="2">heading2  <button>click</button>  </heading>