How to get it with javascript / jquery

I am a beginner and try to learn self.

I try to learn the following

Problem 1

Try to change the background color from the input color and the code is as follows

 function changebg(){

      var bgColor = $("#red").val();
      
      document.querySelectorAll(".a").forEach((c1) => {
    c1.style.backgroundColor = bgColor;
  });
     }
    changebg();
     $("input#red").change(changebg);
});

<input id="red" type="color" >


<p class="a">If you click on me, I will disappear.</p>
<p class="a">Click me away!</p>
<p class="a">Click me too!</p>

Also need to call changebg(); in another function as well.

The below code works with 3 input values. But don’t know the reason for the above or how to correct it as well.

 function rgb() {
  const bgColor = `rgb(${document.getElementById("red").value},${
    document.getElementById("green").value
  },${document.getElementById("blue").value})`;
    document.querySelectorAll(".odd").forEach((odd) => {
    odd.style.backgroundColor = bgColor;
    
  });
}

rgb();

Don’t know why the code not functioning.

Problem 2

Try to change the the active states of two divisions corresponding elements simultaneously. Also the first button of each groups must toggle classes as well. It functions some what but when the button[0] state is always active once clicked.

But there is no correspondence response from the other division elements.

 document.querySelector('.toggle-container').addEventListener('click', ({ target }) => {
  if (!target.matches('.toggle-button')) {
    return;
  }
  const toggleContainer = target.parentElement;
  const btns = toggleContainer.children;
  if (target === btns[0]) {
    
    btns[1,2,3].classList.remove('active');
    btns[0].classList.add('active').toggle('active1 active2');
     
  }  if (target === btns[1]) {
    btns[-1,0,2,3].classList.remove('active active1');
    btns[1].classList.add('active');
  }
   if (target === btns[2]) {
    btns[-1,0,1,3].classList.remove('active');
    btns[2].classList.add('active');
  }
   if (target === btns[3]) {
    btns[-1,0,1,2].classList.remove('active');
    btns[3].classList.add('active');
  }
 
});

});

.active {
  background-color: yellow;
}
.active1 {
  background-color: red;
}
.active2 {
  background-color: blue;
}

<div class="toggle-container">
    <button class="toggle-button">List-0</button>
    <button class="toggle-button">List-1</button>
     <button class="toggle-button">List-2</button>
      <button class="toggle-button">List-3</button>
  </div>
  
  
    <div class="toggle-container">
    <button class="toggle-button">List-0</button>
    <button class="toggle-button">List-1</button>
     <button class="toggle-button">List-2</button>
      <button class="toggle-button">List-3</button>
  </div>

All help at all levels for either or both problems welcome.

(if provide with a simple explanation may more useful).