form elements not clickable - html

Question

I am developing a system I have been asked to do but the form elements are not clickable to enter any info in the fields, I have tried moving the form tag to above the very first div in the code below in case it was the issue but did not work unfortunately. I am not sure what else to try, can someone have a look at the code below please
Update: I have got the form elements working by adding zindex: 9999; to .form-group class in the CSS but now the datetimepicker is appearing behind the select dropdown menu. I have uploaded a screenshot of the issue to the link below
Here is a screenshot of my issue:
My code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12" id="detail">
<form name="addData" id="addData" action="" method="post">
<div class="row">
<div class="form-group col-lg-3">
<input type="hidden" name="eventID" id="eventID" class="form-control">
<label for="StartDate">Start Date: </label>
<input type="date" class="form-control" required name="StartDate" id="StartDate" />
</div>
<div class="form-group col-lg-3">
<label for="StartTime" style="margin: 0 0 15px 0;">Start Time: </label>
<div class='input-group date' id='datetimepicker3'>
<input name="StartTime" id="StartTime" type='text' required class="form-control" />
<span class="input-group-addon">
<i class="fa fa-clock-o"></i>
</span>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
<div class="form-group col-lg-3">
<label for="StartDate">End Date: </label>
<input type="date" required class="form-control" name="EndDate" id="EndDate" />
</div>
<div class="form-group col-lg-3">
<label for="EndTime" style="margin: 0 0 15px 0;">End Time: </label>
<div class='input-group date' id='datetimepicker4'>
<input name="EndTime" id="EndTime" required type='text' class="form-control" />
<span class="input-group-addon">
<i class="fa fa-clock-o"></i>
</span>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
<div class="row">
<div class="form-group col-lg-3">
<label for="riders_name">Riders Name: </label>
<select class="form-control" style="height: 34px;" required name="riders_name" id="riders_name"></select>
</div>
<div class="form-group col-lg-3">
<label for="horses_name">Horses Name : </label>
<select class="form-control" style="height: 34px;" required name="horses_name" id="horses_name">
<option value="">--Empty--</option>
</select>
</div>
<div class="form-group col-lg-3">
<label for="instructor_name">Instructor Name : </label>
<select class="form-control" style="height: 34px;" required name="instructor_name" id="instructor_name">
<option value="">--Empty--</option>
</select>
</div>
<div class="form-group col-lg-3">
<label for="groom_name">Groom Name : </label>
<select class="form-control" style="height: 34px;" required name="groom_name" id="groom_name">
<option value="">--Empty--</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="form-group col-lg-9">
<label for="comments">Comments : </label>
<textarea name="comments" id="comments" class="form-control"></textarea>
</div>
<div class="form-group col-lg-3">
<label for="Repeat">Repeat : </label>
<select class="form-control" style="height: 34px;" required name="Repeat" id="Repeat">
<option value="0">none</option>
<option value="1">Daily</option>
<option value="2">Weekly</option>
<option value="3">Monthly</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-lg-1">
<button type="submit" class="btn btn-primary" name="submit" id="submit">Submit</button>
</div>
<div class="form-group col-lg-1">
<button type="submit" class="btn btn-danger" name="cancel" id="cancel">Cancel</button>
</div>
<div class="form-group col-lg-5">
</div>
<div class="form-group col-lg-5">
</div>
</div>
</form>
</div>
<script>
$.getJSON("fullcalendar/getriders.php", function(data) {
var select = $('#riders_name'); //combo/select/dropdown list
if (select.prop) {
var options = select.prop('options');
} else {
var options = select.attr('options');
}
$('option', select).remove();
$.each(data, function(key, value) {
options[options.length] = new Option(value['name'], value['id']);
});
});
$.getJSON("fullcalendar/getinstructors.php", function(data) {
var select = $('#instructor_name'); //combo/select/dropdown list
if (select.prop) {
var options = select.prop('options');
} else {
var options = select.attr('options');
}
$('option', select).remove();
$.each(data, function(key, value) {
options[options.length] = new Option(value['name'], value['id']);
});
});
$.getJSON("fullcalendar/getgrooms.php", function(data) {
var select = $('#groom_name'); //combo/select/dropdown list
if (select.prop) {
var options = select.prop('options');
} else {
var options = select.attr('options');
}
$('option', select).remove();
$.each(data, function(key, value) {
options[options.length] = new Option(value['name'], value['id']);
});
});
</script>

Answer 1

I see several empty <select></select> tags in your form. I suspect you are intending text fields there? If so you need to replace <select></select> with <input type="text" />.
Example, this:
<label for="riders_name">Riders Name: </label>
<select class="form-control" style="height: 34px;" required name="riders_name" id="riders_name"></select>
...should be:
<label for="riders_name">Riders Name: </label>
<input class="form-control" type="text" style="height: 34px;" required name="riders_name" id="riders_name" />

Answer 2

Select drop down always higher z-index set by default by browsers. You have two row one underneath other. You should in top row set higher z-index value with position: relative; then I hope it will work as expected.
Add CSS code with following way:
.higher-z-index {
postion: relative; // This line help z-index work relatively
z-index: 999;
}
Your markup will be something like that:
<div class="row higher-z-index">
.....
....
</div>
<div class="row">
.....
....
</div>
Why this approach:
You should keep it mind this is dose not matter how much z-index value applied in .form-group selector it will work for only sibling elements. But in your case it is going behind of next row elements because modern browsers set by default higher z-index in each next sibling elements until we set explicitly. So underneath row getting higher z-index than top row. So it is dose not matter how many higher z-index value are applied inside of top row container, all will go behind of next row container.