I have two HTML elements with the same properties name and class how can I access the same properties with one javascript code

My HTML

<section id="main" class="main-section">

        <input id="1" name="subrub-input" id="subrub" class="subrub" type="text" />
        <input id="2" name="subrub-input" class="suburb" type="text"/>
 </section>

My Javascript

<!-- <script src="./script/placeholder.js"></script> -->

<script>
  timeout_var = null;

  function typeWriter(
    selector_target,
    text_list,
    placeholder = false,
    i = 0,
    text_list_i = 0,
    delay_ms = 200
  ) {
    if (!i) {
      if (placeholder) {
        document.getElementsByName(selector_target).placeholder = "";
      } else {
        document.getElementsByName(selector_target).innerHTML = "";
      }
    }
    txt = text_list[text_list_i];
    if (i < txt.length) {
      if (placeholder) {
        document.getElementsByName(selector_target).placeholder +=
          txt.charAt(i);
      } else {
        document.getElementsByName(selector_target).innerHTML +=
          txt.charAt(i);
      }
      i++;
      setTimeout(
        typeWriter,
        delay_ms,
        selector_target,
        text_list,
        placeholder,
        i,
        text_list_i
      );
    } else {
      text_list_i++;
      if (typeof text_list[text_list_i] === "undefined") {
        setTimeout(
          typeWriter,
          delay_ms * 5,
          selector_target,
          text_list,
          placeholder
        );
      } else {
        i = 0;
        setTimeout(
          typeWriter,
          delay_ms * 3,
          selector_target,
          text_list,
          placeholder,
          i,
          text_list_i
        );
      }
    }
  }

  text_list = ["Lorem ipsum", "Tap here your search", "it's fine !"];

  return_value = typeWriter("subrub-input", text_list, true);
</script>

1. How can I access the element by "same name" or by "same classes" or by "querySelectorAll()".

2. One single element is accessible for me by using on querySelector