ASP.NET MVC/JavaScript Add form element with JS & link element to model

Question

I'm trying to make a page where you'd press a button, 'Add Option', and it'd add another <input asp-for> to the form during runtime, which would then append the newly added <input asp-for>'s value to the Model's IEnumerable<PollOption>.

What's the best way to do it with JavaScript, if it's possible?

Here's what I have:

index.cshtml

<form method="post">
    <div id="optionsContainer" class="col-8 pt-4">
        <div class="form-group row">
            <div class="col-6 text-center text-light">
                Poll Title
            </div>
            <div class="col-6">
                <input asp-for="PollTitle" class="form-control" />
            </div>
        </div>
        <br />
        <div class="form-group row">
            <button id="addNewOptionBtn" class="btn btn-primary">Add New Option</button>
            <div class="col-6 text-center text-light">
                Options:
            </div>
        </div>
    </div>
    <button type="submit" class="btn btn-success form-control">Create Poll</button>
</form>

PollModel

[BsonId]
public ObjectId Id { get; set; }
public int PollId { get; set; }
public string? PollTitle { get; set; }
public IEnumerable<PollOptionModel>? PollOptions { get; set; }
public DateTime? CreatedAt { get; set; }
public bool IsActive { get; set; }

PollOptionModel

[BsonId]
public ObjectId Id { get; set; }
public int OptionId { get; set; }
public string? Option { get; set; }

Any help is appreciated.