Как показать / скрыть строку внутри цикла foreach на основе кнопки отправки

Question

У меня есть страница, где мне нужно показать или скрыть строку, основываясь на кнопке отправки.Когда страница загружается, я не хочу отображать год.Годы должны отображаться только при нажатии кнопки «Отправить».Но с кодом ниже только первая строка скрыта при загрузке страницы.Как скрыть все строки при загрузке страницы?

function showDiv() {
            var v = document.getElementById('search').value;
            document.getElementById('search').innerText = v;
            if (v) {
                document.getElementById("searchresult").style.visibility = "visible";

                document.getElementById("hide").style.visibility = "hidden";
            }
            else {
                document.getElementById("searchresult").style.visibility = "hidden";

                document.getElementById("hide").style.visibility = "visible";
            }
        }

    
    
   <button type="submit" name="Submit" onclick="showDiv()">Submit</button> 
   
  <div id="searchresult">
            <strong>You searched "<span id="search"></span>"</strong>
        </div> 
   
    @foreach (var groupMonth in Model.Records.GroupBy(recordLists => new { Lists.date.Value.Year, Lists.date.Value.Month }))
                    {
                        <tr >
                            <td colspan="4" style="font-weight:bold">
                                <div class="Header">
                                    <span id="hide" style="color: aqua;">@groupMonth.Key.Year</span> 
                                    
                                </div>
                            </td>
                        </tr>
      }

Answer 1

Из-за foreach вы выводите несколько строк, содержащих <span id="hide".Вы не можете иметь несколько элементов с одинаковым идентификатором.Как код должен знать, о каком вы говорите, когда пытаетесь выбрать по идентификатору?Он не может, поэтому он просто выбирает первый, который он находит каждый раз.Все остальные считаются недействительными.Ведь идентификатор - по определению - должен быть уникальным.

Вместо id="hide" вместо него используйте class="hide".И затем вы можете выбрать все элементы этого класса и скрыть их все.