I am currently working on a PHP and Bootstrap script designed to collect website addresses. Initially, there is a single field that gathers website names linked to "address1" in the MySQL database. I have expanded the database to include two additional fields known as "address2" and "address3."
My goal is to include an "Add More" button beneath the "address1" field, allowing users to click and add another website if needed. The code snippet I am utilizing is as follows:
<div class="span12">
<form class="form-horizontal" id="registerHere" method='post' action=''>
<fieldset>
<div class="control-group">
<label class="control-label" for="input01">Website Address 1</label>
<div class="controls">
<input type="text" class="input-xlarge" id="address1" name="address1">
</div>
</div>
<div class="control-group" style="display: none;" id="address2Field">
<label class="control-label" for="input01">Website Address 2</label>
<div class="controls">
<input type="text" class="input-xlarge" id="address2" name="address2">
</div>
</div>
<div class="control-group" style="display: none;" id="address3Field">
<label class="control-label" for="input01">Website Address 3</label>
<div class="controls">
<input type="text" class="input-xlarge" id="address3" name="address3">
</div>
</div>
</div>
In the code above, my intention is to initially hide the "Website Address 2" and "Website Address 3" fields but reveal them upon clicking the "Add More" button placed under "Website Address 1. I am looking for a quick solution, so any guidance would be greatly appreciated. Additionally, I would like to limit the functionality to only two additional fields, preventing users from repeatedly clicking and creating an excessive number of new fields.
Thank you
Demo Image https://i.sstatic.net/lOm7d.png