I am trying to have a second slider on the same page but its not working

I am trying to have a second slider on the same page but its not working.
The first one works fine but the second one is not working. I think there is something wrong with the parent element method but cant wrap my head around it.

var ids = ["view_0", "view_1", "view_2", "view_3"]
let current_id = 0;

function next(productnr) {
  if (document.getElementById(ids[current_id]).parentElement.id == productnr) {
    let last_array_position = ids.length;
    document.getElementById(ids[current_id]).classList.remove("show");
    current_id++;
    if (current_id >= last_array_position) {
      current_id = 0;
    }
    document.getElementById(ids[current_id]).classList.add("show");
  }
}

<style>#1 img {
  display: none;
}

#1 img.show {
  display: block;
}

</style>

<!DOCTYPE html>
<html>

<head>
  <title>Multiple Slider</title>
</head>

<body>

  <article id=1>
    <img class="show" id="view_0"></img>
    <img id="view_1"></img>
    <img id="view_2"></img>
    <img id="view_3"></img>
    <button><</button>
    <button onclick="next(1)">></button>
    <article id=2>
      <img class="show" id="view_0"></img>
      <img id="view_1"></img>
      <img id="view_2"></img>
      <img id="view_3"></img>
      <button><</button>
      <button onclick="next(2)">></button>




</body>