Дублируйте текущие поля ввода и добавьте дополнительную строку в таблицу на той же странице

Question

Необходимо иметь возможность добавлять неограниченные поля ввода, если пользователь нажал кнопку «pievienot vel», также необходимо добавить больше строк таблицы, если нажата кнопка.Извините, если ответ где-то, просто не смог его найти.В настоящее время я могу добавить только одно поле ввода и одну строку в таблицу, нажимая кнопки.Также новый для PHP и HTML, так что не судите мой код:)

Нужна любая помощь!:)

    <h3> Personīgā informācija </h3> 

<div id="Personal">

    <label>Vārds: </label>
    <input name="Name" type="text" size ="30"
     <?php
    if(isset($_POST['create'])) {
        echo "value='".$_POST['Name']."'";
    } else {
        echo "placeholder='Vārds'";
    }
    ?>  

    /> <br /><br />

    <label>Uzvārds: </label>
    <input name="Surname" type="text" size ="30" value="" placeholder='Uzvārds' /> <br /><br />

    <label>Dzimšanas gads: </label>
    <input name="DOB" type="text" size ="15" value="" placeholder="Dzimšanas Gads"  /> <br /><br />

    <label>E-pasts: </label>
    <input name="Email" type="text" size ="30" value="" placeholder="E-pasta adrese" /> <br /><br />

</div>

    <h3> Izglītības informācija 
    <button class="educationbtn" name="education" onclick="addText();" > Pievienot vel </button>
    </h3> 
<div id="Education" name="Educationdiv">

    <label>Iestādes nosaukums: </label>
    <input name="EdName[]" type="text" size ="30" value="" placeholder="Iestādes nosaukums" /> <br /><br />

    <label>Gads no - līdz: </label>
    <input name="Year1[]" type="text" size ="10" value="" placeholder="No" />
    <input name="Year2" type="text" size ="10" value="" placeholder="Līdz"  /> <br /><br />

    <label>Specialitāte: </label>
    <input name="Specialitate[]" type="text" size ="30" value="" placeholder="Specialitāte"  /> <br /><br />

</div>

    <?php

    if(isset($_POST['education']))
    { 
    ?>
    <label>Iestādes nosaukums: </label>
    <input name="EdName[]" type="text" size ="30" value="" placeholder="Iestādes nosaukums" /> <br /><br />

    <label>Gads no - līdz: </label>
    <input name="Year1[]" type="text" size ="10" value="" placeholder="No" />
    <input name="Year2" type="text" size ="10" value="" placeholder="Līdz"  /> <br /><br />

    <label>Specialitāte: </label>
    <input name="Specialitate[]" type="text" size ="30" value="" placeholder="Specialitāte"  /> <br /><br />

    <?php 

    }
    ?>
    <h3> Valodu zināšanu informācija 
    <button class="languagebtn" name="language"> Pievienot vel </button>
    </h3> 

<div id="Language">

    <table style="center" style="width:100%">

    <tr>
    <th> Valoda </th>
    <th> Runātprasme </th>
    <th> Lasītprasme </th>
    <th> Rakstītprasme </th>
    </tr>

    <tr>
    <td> <input name="Lvtext" type="text" size ="10" value="Latviešu"  readonly /> </td></td>
    <td> <input name="LvRunat" type="text" size ="20" value=""  /> </td>
    <td> <input name="LvLasit" type="text" size ="20" value=""  /> </td>
    <td> <input name="LvRakstit" type="text" size ="20" value=""  /> </td>
    </tr>

    <tr>
    <td> <input name="Engtext" type="text" size ="10" value="Angļu" readonly  /> </td></td>
    <td> <input name="EngRunat" type="text" size ="20" value=""  /> </td>
    <td> <input name="EngLasit" type="text" size ="20" value=""  /> </td>
    <td> <input name="EngRakstit" type="text" size ="20" value=""  /> </td>
    </tr>

    <tr>
    <td> <input name="Rustext"type="text" size ="10" value="Krievu" readonly /> </td></td>
    <td> <input name="RusRunat" type="text" size ="20" value=""  /> </td>
    <td> <input name="RusLasit" type="text" size ="20" value=""  /> </td>
    <td> <input name="RusRakstit" type="text" size ="20" value=""  /> </td>
    </tr>

    <?php

        if(isset($_POST['language']))
        {
        ?>
        <tr>
        <td> <input name="Extext"type="text" size ="10" value=""  /> </td></td>
        <td> <input name="ExRunat" type="text" size ="20" value=""  /> </td>
        <td> <input name="ExLasit" type="text" size ="20" value=""  /> </td>
        <td> <input name="ExRakstit" type="text" size ="20" value=""  /> </td>
        </tr>
            <?php
        }
    ?>

    </table> 
    <br /><br />

</div>

<input type="submit" name="create" class="button" size="10" value="Create CV" />
<br /><br />
<br /><br />

Answer 1

Вы можете сделать что-то вроде этого:

<script>
var count = 0;
function addNewInput(){

  var eDiv = document.getElementById('Education');
  var newInput = document.createElement('input');

  newInput.setAttribute('id', 'newInput'+ count);

  eDiv.appendChild(newInput);

  count++;

}
</script>

Затем вы можете использовать атрибут onClick = 'addNewInput' в нужной кнопке.

Это пример, но я думаю, что этоможет дать вам представление, как вы могли бы сделать это в javascript для вашей формы.Надеюсь, это поможет вам.