Pokazywanie kolejnych pól przy zaznaczeniu checkboxa

Dzień dobry, mam pewien problem.
Od razu zaznaczę że nie jestem dobry w programowaniu.
Problem polega na tym że chciałbym zrobić w ten sposób aby w poniższym fragmencie kodu gdy checkbox zostanie zaznaczony pojawiły się pola do wprowadzenia danych (nazwa dokumentu i numer dokumentu)

<tr>
        <div class="form-group">
        <td><label>Nie mam numeru PESEL</label></td>
        <td><input type="checkbox" class="kontrolka"></td>
        </div>
    </tr>
    
  <tr class="dokument" id="pola">
            <div class="form-group">
            <td><label>Nazwa dokumentu tożsamości:</label></td>
            <td><select class="form-control" id="dokument_tozsamosci" name="dokument_tozsamosci" required>
                <option>Paszport</option>
                <option>Dowód osobisty</option>
                <option>Inny</option>
                </select></td>
              </div>
    </tr>
  
  <tr class="dokument" id="pola">
            <div class="form-group">
            <td><label>Numer dokumentu tożsamosci:</label></td>
            <td><input type="text" class="form-control" id="numer_dokumentu" name="numer_dokumentu" required></td>
            </div>
  
  </tr>

Z góry dziękuję za pomoc, pozdrawiam.

Uwaga nie na temat, ale ważna:
użyłeś 2 razy tego samego Id - <tr class="dokument" id="pola">. Jest to błąd, bo o ile class może występować wiele razy (w sensie - wiele elementów może mieć ustawioną taką samą klasę), a także jeden element może posiadać wiele klas, to niedopuszczalne jest stworzenie więcej niż 1 elementu z takim samym ID

pytanie do osób siedzących w webówce - czy można (pomijając sens takiego rozwiązania) jednemu elementowi przypisać kilka ID? Wydaje mi się, że nie - ale fajnie, jakby ktoś to potwierdził albo sprostował

Co do głównego pytania - z grubsza to są dwa sposoby na osiągnięcie takiego efektu:

• dodanie ukrytych pól od razu, ale ustawienie, aby były ukryte
• stworzenie ich dynamicznie, gdy się pojawi taka potrzeba

Pierwszy sposób jest o wiele prostszy, więc na nim się skupmy:

1. poprawiamy błąd związany z powtórzeniem ID - ja zmieniłem ID "pola" na "pole1" i "pole2".
2. dodajemy styl do tych ukrytych pól. Lepiej by było to zrobić w osobnym pliku (jak nie wiesz o co chodzi - poszukaj hasła "osadzanie stylów CSS", są tego miliony). Dodanie style="display: none;" powoduje, że dany elementy się nie wyświetla/jest ukryty
3. Dodajemy funkcję, która zostanie wywołana po zmianie stanu checkboxa - fragment onclick="ptaszek()". W ten sposób wskazujemy, że po kliknięciu na ten element ma się wykonać dana funkcja - w niej odczytamy stan ptaszka oraz pokażemy albo schowamy pola z danymi dokumentów
4. W tej funkcji sprawdzamy, czy ptaszek jest postawiony - if (document.getElementById("ptaszek").checked)
5. Na początku funkcji pobraliśmy po ID (polecenie document.getElementById()) uchwyty do elementów, które chcemy schować/pobrać. Nazwałem je nazwadokumentu oraz numerdokumentu.
6. Jeśli ptaszek jest aktywny - ustawiamy widoczność tych dwóch elementów (polecenie nazwadokumentu.style.display = "table-row";), a jeśli go nie ma to ukrywamy niepotrzebne pola - za to odpowiada fragment numerdokumentu.style.display = "none";

Działający przykład masz do obejrzenia tutaj: https://jsfiddle.net/kvgL3atu/1/

Uwagi poza konkursem:

1. W sumie to lepiej by było, zamiast ukrywać każde z pól oddzielnie, wsadzić je do jakiegoś pojemnika i ukrywać razem. Ale jakbym wszystkie poprawki miał zastosować, to bym praktycznie to napisał od nowa za Ciebie, a nie o to chodzi. Ale na przyszłość - pamiętaj o tej wskazówce
2. Czemu to robisz w układzie tabelki (<table> ... <tr> ... <td>)? Jest taki wymóg, czy nie znasz/nie znalazłeś niczego lepszego?
3. Tak ogólnie to jest to średnio ładnie napisane, moje poprawki tez są zrobione raczej w prosty sposób. Można wiele rzeczy zrobić inaczej/bardziej profesjonalnie, ale skoro sam zaznaczasz, że nie jesteś w tym zbyt dobry, to uznałem, że lepiej to zrobić prostacko, ale prosto - przynajmniej są szanse, że zrozumiesz ;) (np. samo dodawanie funkcji reagujących na zdarzenia - zamiast wpisywać z łapy onclick= xxxx to można skorzystać z https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)

HTML:

<table>

<tr>
        <div class="form-group">
        <td><label>Nie mam numeru PESEL</label></td>
        <td><input type="checkbox" class="kontrolka" id="ptaszek" onclick="ptaszek()"></td>
        </div>
    </tr>
    
  <tr class="dokument" id="pole1" style="display:none;">
            <div class="form-group">
            <td><label>Nazwa dokumentu tożsamości:</label></td>
            <td><select class="form-control" id="dokument_tozsamosci" name="dokument_tozsamosci" required>
                <option>Paszport</option>
                <option>Dowód osobisty</option>
                <option>Inny</option>
                </select></td>
              </div>
    </tr>
  
  <tr class="dokument" id="pole2" style="display: none;">
            <div class="form-group">
            <td><label>Numer dokumentu tożsamosci:</label></td>
            <td><input type="text" class="form-control" id="numer_dokumentu" name="numer_dokumentu" required></td>
            </div>
  
  </tr>
  </table>

JavaScript:

function ptaszek() {
nazwadokumentu = document.getElementById("pole1");
numerdokumentu = document.getElementById("pole2");
if (document.getElementById("ptaszek").checked) {
	nazwadokumentu.style.display = "table-row";
		numerdokumentu.style.display = "table-row";
}
else {
	nazwadokumentu.style.display = "none";
		numerdokumentu.style.display = "none";
}

}