So I'm building a form using Bootstrap, and I've got a modal that contains a dropdown. Two or Three text fields need to appear based on the users selection, and I've got that figured out with this:
The form:
<div class="row">
<div class="form-group input-group">
<div class="col">
<label for="preinstallscripts" class="has-float-label">
<select class="form-control spacing" name="preinstallscripts" id="preinstallscripts" required>
<option value="">Choose...</option>
<option value="MovePath">Move Path</option>
<option value="RemovePath">Remove Path</option>
<option value="LinkPath">Link Path</option>
<option value="chmod">CHMOD</option>
<option value="chmod -r">CHMOD -R</option>
<option value="chown">CHOWN</option>
<option value="chown group">CHOWN Group</option>
<option value="AddSource">Add Source</option>
<option value="RemoveSource">Remove Source</option>
<option value="RunScript">Run Script</option>
</select>
<span>Scripts</span>
</label>
</div><!-- End Column -->
</div><!-- End Form Group -->
</div><!-- End Row -->
And my JQuery:
$(document).ready(function() {
$('#preinstallscripts').change(function(e) {
e.preventDefault();
var selection = $(this).val();
if (selection === 'MovePath') {
$('#preinstall-inputs').html('<div class="row" style="margin-bottom: -10px;"><div class="form-group input-group"><div class="col"><input type="text" name="preinstall[movepath][]" id="preinstall-movepath" class="form-control"></div><div class="col"><input type="text" name="preinstall[movepath][]" id="preinstall-movepath" class="form-control"></div></div></div>');
};
});
});
Here's where my issue arises, within that modal, I have a button to add an additional dropdown, but this dropdown will contain the exact same options with the exact same values. If I add a dropdown, then select something from it, it won't add the text fields as the added dropdown has the same id as the initial one, and the JQuery won't properly work as there's now two dropdowns with id="preinstallscripts".
I'm thinking that there must be a way to edit the JQuery on my page when a button is pressed, that way if someone presses the button to add an additional dropdown, the function that I pasted will be updated to target that new dropdown. But I do that then the previous (initial) dropdown won't change its textfields if the user goes back and changes their selection as that JQuery function is now targeting the new ID of the new dropdown.
I'm assuming it's a poor idea in practice to just write 5 JQuery functions even if only 1 gets used, as I could write 5 different functions targeting id="preinstallscripts1" through id="preinstallscripts5" and the button that adds a new dropdown will contain a var, starting at 1, and each time it adds a new dropdown I'll do var++, and echo that var into the appended HTML as .append(<select id="preinstallscripts"+var>
That method is redundant and I feel as if there has to be a better way of going about this.
EDIT: For some more context, here's the JQuery that adds an additional dropdown on the press of a button:
$(document).ready(function() {
var preInstallMax = 2; //maximum input boxes allowed
var preInstallWrapper = $(".preinstall-modal"); //Fields wrapper
var preInstallAdd = $(".addPreInstall"); //Add button ID
var z = 0; //initlal text box count
$(preInstallAdd).click(function(e){ //on add input button click
e.preventDefault();
if(z < preInstallMax){ //max input box allowed
z++; //text box increment
$(preInstallWrapper).append('<hr><div class="row"><div class="form-group input-group"><div class="col"> <label for="preinstallscripts" class="has-float-label"> <select class="form-control spacing" name="preinstallscripts" id="preinstallscripts" required><option value="">Choose...</option><option>Move Path</option><option>Remove Path</option><option>Link Path</option><option>CHMOD</option><option>CHMOD -R</option><option>CHOWN</option><option>CHOWN Group</option><option>Add Source</option><option>Remove Source</option><option>Run Script</option> </select> <span>Scripts</span> </label></div></div></div><div id="preinstall-inputs2"></div>'); //add input box
}
});
});
And here's a screenshot of the modal if it helps to visualize it:
