Таблица с пошаговым заполнением

У меня есть вот такой код, который позволяет мне поочередно делать ячейки таблицы видимыми:

<?php
$column_one = [
"1" => "Максим",
"2" => "Василий",
"3" => "Евгений",
"4" => "Владимир",
];
$column_two = [
"1" => "Евтушенко",
"2" => "Петров",
"3" => "Долгополов",
"4" => "Неуструев",
];
$column_three = [
"1" => "какое-то значени",
"2" => "другое значение",
"3" => "третий вариант",
"4" => "четвертый вариант",
];
    $step = 0;
echo "<table class=\"style1\">";
if ($step == 0) {
  echo "<tr>";
    echo "<td>1 столбик</td>";
    echo "<td>2 столбик</td>";
    echo "<td>3 столбик</td>";
  echo "</tr>";
}
  if ($step == 0) {
    echo "<tr>";
    echo "<td><select name=\"one\">";
      foreach ($column_one as $key => $value) {
        echo "<form method=\"POST\"><option>$value</option></form>";
      }
    echo "</select></td>";
    if (isset(POST[one])) {
      $step ++;
    }
  }
    if ($step == 1) {
      echo "<td><select name=\"two\">";
        foreach ($column_two as $key => $value) {
          echo "<option>$value</option>";
        }
      echo "</td></select>";
    }
      if ($step == 2) {
        echo "<td><select name=\"three\">";
          foreach ($column_three as $key => $value) {
            echo "<option>$value</option>";
          }
        echo "</td></select>";
      }

    echo "</tr>";
  echo "</table>";
?>

Я добавил вот такой код в файл JS чтобы убирать атрибут hidden, можно ли как-то сделать так чтобы не было вот таких дублирований кусков кода? например если бы у всех select был один id или еще какие-то варианты?

    document.getElementById("one").selectedIndex = -1;
    document.getElementById("two").selectedIndex = -1;
    document.getElementById("three").selectedIndex = -1;


    var sel = document.getElementById("one"); 
    var value = sel.value;
    var text = sel.options[sel.selectedIndex].text;

    function functionName() {
     if (text != '') {
      var sel2 = document.getElementById("two");
      sel2.removeAttribute("hidden");
     }
    }

    var sel_two = document.getElementById("two");
    var value_two = sel_two.value;
    var text_two = sel_two.options[sel_two.selectedIndex].text;

   function HiddenTwo() {
     if (text_two != '') {
       var sel3 = document.getElementById("three");
       sel3.removeAttribute("hidden");
     }
    }

Ответы (0 шт):