Two elements with same ID- trying to figure out what I can change

I'm building a day planner app and realized the reason my save buttons aren't working is because I have multiple elements with the same Id. My rows have an Id number based off the hour with moment.js that highlight them based off past/present/future. And my inputs also have an Id number based off the hour as well that goes with my save function. Everything I've come up with to fix this, just screws everything up. Any ideas? Thanks. Below is part of my HTML (I have rows for hours 0900-1700) and some of my JS.

HTML:

  <tr class="row" id="16">
            <th scope="time" id="hour16" class="time">16:00</th>
            <td><input type="text" class= "hourinput" id= "16"/></td>
            <td class="btnContainer">
              <button class="saveBtn" onclick="saveHour(16)"><i class="fas fa-save"></i></button>
            </td>
          </tr>
          <tr class="row" id="17">
            <th scope="time" id="hour17" class="time">17:00</th>
            <td><input type="text" class= "hourinput" id= "17"/></td>
            <td class="btnContainer">
              <button class="saveBtn" onclick="saveHour(17)"><i class="fas fa-save"></i></button>
            </td>
          </tr>

JS:

const rows = document.getElementsByClassName("row");
let currentHour = parseInt(moment().format('HH'));

Array.from(rows).forEach(row => {
  let
    rowIdString = row.id,rowHour;
    // TEST: console.log(rowIdString);
  if (rowIdString) {
    rowHour = parseInt(rowIdString);
  }
  if (rowHour) {
    // Compares row id to current hour and sets color with the setColor(); function----//
    if (currentHour === rowHour) {
      setColor(row, "rgb(181,88,110, 0.55");
    } else if (currentHour < rowHour) {
      setColor(row, "rgb(255,255,255,0.45");
    } else if (currentHour > rowHour) {
      setColor(row, "rgb(85,46,109, 0.35)");
    }
  }
});

// Set color function below----------------------------------------------------------//
function setColor(element, color) {
  element.style.backgroundColor = color;
};

// Add input to local storage-------------------------------------------------------//

const saveHour = (hour) => {
    const val = document.getElementById('hour').value;
    localStorage.setItem(`hour:${hour}`, val);
};

const savePlan = () => {
    const inputs = Array.from(document.getElementsByClassName('hourinput'));
    const plan = inputs.map((input) => input.value);
    localStorage.setItem('plan', JSON.stringify(plan));
}

window.addEventListener('load', () => {
    const inputs = document.getElementsByClassName('hourinput');
    const planStr = localStorage.getItem('plan');
    const plan = JSON.parse(planStr);

    // TEST:console.log(plan);

    if (plan) {
        for (let i = 0; i < inputs.length; i++) {
            inputs[i].value = plan[i];
        }
    } else {
        for (let i = 0; i < inputs.length; i++) {
            inputs[i].value = localStorage.getItem(`hour:${inputs[i].id}`);
        }
    }
});

Any help appreciated. Sorry it's a lot of code. Thanks so much.

You should not use numerical id, id should start with an letter

You can use querySelector() to get input value:

const val = document.querySelector('[id="' + hour + '"] .hourinput').value;