Create new HTML element with ASP.NET Razor Pages

I am new to ASP.NET Razor Pages and I am trying to create a new dropdown list every time I click on a button so I can add multiple things to my database.
I use ASP.NET Razor Pages

.cshtml

<div id="newRow">
    <select asp-for="ingredientsIDs" asp-items="Model.Options"></select>
</div>    
<button type="button" id="addRow">Add ingredient</button>

The selected item is saved to model property called ingredientsIDs

.cshtml.cs file:

[BindProperty]
public List<int> ingredientsIDs { get; set; }
public List<SelectListItem> Options { get; set; }
public void OnGet()
    {
        Options = _context.Ingredients.Select(x => new SelectListItem
        {
            Value = x.Id.ToString(),
            Text = x.NameOfIngredient
        }).ToList();

    }

The first issue I am having is that it does not show a dropdown list but rather a

The second thing (the one I care about the most) is I am not able to create a new select element when using JS script. I am not able to put there the asp-for="". I have found out that it is not possible due to JS being client based and asp-for being server based. But I have no idea how to make it work.

Can someone please help me to copy/create new select element with bind to model property?

What's your first issue?

The first issue I am having is that it does not show a dropdown list but rather a

you don't provide a whole sentence, But from your question, I think you need to generate a new dropdown list via click the button in JavasCript.

asp-for and asp-items are tag helpers in razor, you can't use JavaScript to generate it directly, Here is a simple demo can Meet your needs.

<form method="post">
    <input value="1" type="hidden" disabled="disabled" id="index"/>
    <div id="newRow">
        <select id="ingredientsIDs[0]" name="ingredientsIDs[0]" asp-items="Model.Options"></select>
    </div>
   
    <button type="button" id="addRow" onclick="Add()">Add ingredient</button>
    <button>Submit</button>
</form>

@section Scripts{
    <script>
        function Add(){
            let index = document.getElementById("index");
            let div = document.getElementById("newRow")
           let newSelect = document.createElement("select")
            newSelect.name = "ingredientsIDs["+index.value+"]"

            var sourceDropdown = document.getElementById("ingredientsIDs[0]")
            

            for (var i= 0; i < sourceDropdown.options.length; i++){
                var option = sourceDropdown.options[i];
                var newOption = document.createElement('option');
                newOption.value = option.value;
                newOption.text = option.text;
                newSelect.appendChild(newOption)
            }
           
            div.appendChild(newSelect);
            index.value++

        }
    </script>
}

Gif Demo