I am new to webDevelopment. I have a list of buttons, but the data-target is the same model for every button click. The structure of my model is as follows -
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Missing {{suggestivalue}}
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form class="form-horizontal" role="form">
(...)
</form>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
(...)
</div>
</div>
</div>
</div>
The buttons are displayed as follows -
<ul class="col-md-12 list-group suggestion">
(…)
</ul>
Each button opens the same model, but it should be specific to the clicked value. For example, if the button is "FullName", I should be able to add two input boxes "firstName" and "lastName". How can I dynamically add fields based on the clicked button? Any assistance would be appreciated.