При нажатии кнопки в тег ol надо вставлять строку для заполнения.
Подскажите как написать функцию?
И еще хотелось бы при создании строки присваивать элементам id всем элементам input.
<li>
<label for="inpinst">Учебное заведение</label>
<input type="text" name="inpinst" id="inpinst"/>
<label for="inpstecial">Специальность</label>
<input type="text" name="inpstecial" id="inpstecial"/>
<label for="inpdatpost">Дата поступления</label>
<input type="date" name="inpdatpost" id="inpdatpost" />
<label for="inpdataokon">окончания</label>
<input type="date" name="inpdataokon" id="inpdataokon" />
</li>
Попробуйте так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
ol{
max-width: 50%;
}
label{
display: block;
margin: 5px;
cursor: pointer;
}
input{
margin-left: 5px;
}
.addNewLine{
position: absolute;
top: 20px;
right: 10px;
cursor: pointer;
font-weight: bold;
}
.addNewLine:hover{
color: blue;
}
</style>
</head>
<body>
<template id="tmpl">
<label><input type="text" /></label>
</template>
<button class="addNewLine">Добавить строку</button>
<ol>
<li>
<label>Учебное заведение:<input type="text" name="inpinst" id="inpinst" /></label>
<label>Специальность:<input type="text" name="inpstecial" id="inpstecial" /></label>
<label>Дата поступления:<input type="date" name="inpdatpost" id="inpdatpost" /></label>
<label>Дата окончания:<input type="date" name="inpdataokon" id="inpdataokon" /></label>
</li>
</ol>
<script>
document.querySelector('.addNewLine').addEventListener('click', _ =>{
const lbl = prompt('Наименование дополнительного поля', 'Дополнительное поле'),
tmpl = document.querySelector('#tmpl'),
clone = tmpl.content.cloneNode(true),
inps = document.querySelectorAll('input'),
li = document.querySelector('li');
li.append(clone);
document.querySelector('li label:last-of-type').insertAdjacentText('afterbegin', lbl + ':');
document.querySelector('li label:last-of-type input').id = 'input_' + inps.length;
document.querySelector('li label:last-of-type input').name = 'input_' + inps.length;
});
</script>
</body>
</html>