I am currently using a form to gather user input in order to save specific information, such as instructions for a receipt. The challenge I'm facing is that I would like to have an unlimited number of fields for these instructions, instead of the fixed 3 fields displayed in the image.
My goal is to add a button at the bottom of the form that allows users to create additional input fields dynamically. Despite researching the Bootstrap documentation, I couldn't find any references to this specific feature. Most examples provided by Bootstrap involve a predefined number of input fields.
Below is a snippet of the code I've been using to generate the input fields (currently set to display 10):
<div class="col-md-4">
<h2>Instructions</h2>
<div class="form-group">
<table style="width:75%">
<tr>
<th><label asp-for="Instructions[0].Designation" class="control-label"></label></th>
</tr>
@for (int i = 0; i < 10; i++)
{
<tr>
<td><input asp-for="Instructions[i].Designation" class="form-control" placeholder="Step @(i+1) " /></td>
</tr>
<span asp-validation-for="Instructions[i].Designation" class="text-danger"></span>
}
</table>
</div>