Sim, seria possível.
Usando um exemplo fantasia (porque eu não vou fazer o seu dever de casa, lol). Se o seu formulário tem três campos: descrição, data e status. E esses três campos constituem um item. Se você quiser adicionar um novo item no formulário, então você precisaria de mais três campos. E assim por diante. Cada novo item adicionaria mais três campos.
Isso não é difícil de fazer através do Javascript. Mas é importante tomar cuidado com o nome (atributo name) dos campos. Eles precisam ser diferentes, mas que você possa acessar no PHP quando você enviar o formulário. Um jeito simples, seria utilizar arrays nos nomes. Então se você tem um:
<input type="text" name="descricao">
Então ele passará a ser chamado
<input type="text" name="valor[0][descricao]">
Assim, o nome da descrição do segundo item que você adicionar ao formulário poderá ser chamado:
<input type="text" name="valor[1][descricao]">
Então quando você enviar para o PHP, você terá uma variável em $_POST['valor']. Essa variável vai ser um array, onde cada elemento dessa array é um item (com descrição, data e status). Então para gravar os valores no banco de dados, você apenas faria um loop nessa array e gravaria cada um dos items.
O exemplo desse formulário fantasia completo:
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// Lê cada um dos items que está no array $_POST['valor']
foreach ($_POST['valor'] as $item) {
// Aqui você poderia inserir os items no banco de dados
echo "# <b>Descrição:</b> ". $item['descricao'] .", ";
echo "<b>Data:</b> ". $item['data'] .", ";
echo "<b>Status:</b> ". $item['status'] ."<br>";
}
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exemplo</title>
<style type="text/css">
#website { max-width: 500px; margin: 0 auto; }
.item { padding: 5px; margin: 5px; background-color:silver; border-radius: 5px; }
</style>
<script type="text/javascript">
// Index dos items do formulario
var index = 0;
document.addEventListener('DOMContentLoaded', function () {
document.getElementById("botao_add").addEventListener('click', function () {
// Sempre que alguem clicar no botão "botao_add" fazer:
// Acrescenta mais um no index
index++;
// Gera uma nova div da classe item
let novaDiv = document.createElement('div');
novaDiv.setAttribute('class', 'item');
// Os campos com o novo index
let novoItem =
'<input type="text" name="valor['+ index +'][descricao]" placeholder="Descrição"> ' +
'<input type="text" name="valor['+ index +'][data]" placeholder="Data"> ' +
'<select name="valor['+ index +'][status]">' +
'<option value="">Status</option>' +
'<option value ="Aberto"> Aberto </option>' +
'<option value ="Fechado"> Fechado </option>' +
'</select>';
novaDiv.innerHTML = novoItem;
// Adiciona o novo item na div "formulario" (mantendo o que já está lá)
document.getElementById("formulario").appendChild(novaDiv);
});
});
</script>
</head>
<body>
<div id="website">
<form method="post">
<h1>Cadastrar requisição</h1>
<div id="formulario">
<div class="item">
<input type="text" name="valor[0][descricao]" placeholder="Descrição">
<input type="text" name="valor[0][data]" placeholder="Data">
<select name="valor[0][status]">
<option value="">Status</option>
<option value ="Aberto"> Aberto </option>
<option value ="Fechado"> Fechado </option>
</select>
</div>
</div>
<div style="text-align: center">
<a href="#" id="botao_add">Adicionar novo item</a><br><br>
<button>Enviar</button>
</div>
</form>
</div>
</body>
</html>