Adding item to list on click and displaying it in HTML

Question

So i have a list that is created programmatically.Below is my code
Model :
public class CareersModel
{
public List<JobOpening> JobsOpening;

}
public class JobOpening
{
public int Id { get; set; }
public string Header { get; set; }
public string Content { get; set; }

}
}

 
Controller :
public ActionResult Careers()
{
List<JobOpening> job = new List<JobOpening>()
{

new JobOpening{Id = 1, Header = "Job1", Content = "edde" },
new JobOpening{Id = 2,Header = "Job2", Content = "deded" },

};
return View(job);
}
 
HTML:
 <div>
<div> 
@foreach (var job in Model)
{
<div class="panel panel-default" id="panel2">

<div class="panel-heading-new">

<h4 class="panel-title" id="newpanel1">
<a data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo">
@Html.DisplayFor(modelItem => job.Header, new { job.Id })
</a>
</h4>
<a href='#' id="edit1" class="edit-link">Edit</a><a href='@Url.Action("Careers", "Home", new { eventtype = "Done" })' style="display:none;" class="done-link" id="done1">&nbsp;Done&nbsp;</a>
<a href='#' class="delete-link" id="delete1">Hide</a>

</div>

<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
<li><i class="fa-li fa fa-hand-o-right pad-icon"></i><span class="lead justified">@Html.DisplayFor(modelItem => job.Content, new { job.Id })</span></li>
</ul>
<br />
</div>
</div>
</div>
}
</div>
</div>
 
In above code,two div are shown ,because two items are there in list, now in html i want ADD button , on which if we click a item will be added to list and shown in HTML page,after which there will 3 div on page .Thanks for help