Сделать активной обе формы

Есть 2 формы, первая работает как нужно (вписываешь элемент, нажимаешь на кнопку + и он добавляется вниз к уже существующим элементам. Все нижние элементы, вписанные в html и добавленные через форму можно удалить нажав на крестик ), как распространить действие JS кода и на вторую форму тоже. В JS новичок, подскажите, пожалуйста, решение, необходимо использовать чистый JS

<section>
    <div class="container">
        <div class="form">
           <div class="select-param">
               <p class="select__text">Имя Элемента</p>
                <div class="select__param">
                    <input type="text" class="addItemInput menu__select" placeholder="Элемент">
                    <button class="addItemButton param__button">+</button>
                </div>
                <ol class="result">
                  <li>Элемент1</li>
                  <li>Элемент2</li>
                  <li>Элемент3</li>
                </ol>
              </div>          
          </div>
       </div>
</section>

<section>
     <div class="container">
         <div class="form">
             <div class="select-pa">
                <p class="select__text">Имя Элемента</p>
                <div class="select__param">
                      <input type="text" class="addItemInput menu__select" placeholder="Элемент">
                      <button class="addItemButton param__button">+</button>
                </div>
                <ol class="result">
                     <li>Элемент1</li>
                     <li>Элемент2</li>
                     <li>Элемент3</li>
                </ol>
             </div>
           </div>
        </div>
 </section>

  .select__text {
    padding: 10px 0 6px;
    font-size: 13px;
    color: #51515C;
  }

  .menu__select {
      padding: 9px 140px 10px 10px;
      border-radius: 4px;
      border: 1px solid #C6C6D4;
      display: block;
      background-color: #fefefe;
      font-size: 13px;
      color: #938FA0;
      cursor: pointer;
      width: 100%;
  }

.select__param {
    display: flex;
}

.param__button {
    border: none;
    background-color: #000;
    color: #fff;
    font-size: 27px;
    padding: 0px 8px;
    margin: 3px 3px 3px 23px;
}

.result {
display: flex;
margin-top: 10px;
}

.result li {
  list-style-type: disc;
  font-size: 11px;
  color: #51515C;
  background-color: #EBEBF3;
  border-radius: 40px;
  padding: 6px 16px;
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.removeButton {
    color: #51515C;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

const listDiv = document.querySelector('.select-param');
const listOl = listDiv.querySelector('ol');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const lis = listOl.children;

function attachListItemButtons(li) {
  let remove = document.createElement('button');
  remove.className = 'removeButton';
  remove.textContent = 'x';
  li.appendChild(remove);
}
for(let i=0; i<lis.length; i+=1) {
  attachListItemButtons(lis[i]);
}
// adds a new item on the To Do List
addItemButton.addEventListener('click', () => {
  let ol = document.getElementsByTagName('ol')[0];
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  attachListItemButtons(li);
  ol.appendChild(li);
  addItemInput.value = '';
});

// clicking the buttons
listOl.addEventListener('click', (event) => {
  if(event.target.tagName == 'BUTTON'){
    if (event.target.className == 'removeButton') {
      let li = event.target.parentNode;
      let ol = li.parentNode;
      ol.removeChild(li);
    }  
  }
});