One Bootstrap Modal affects the other - bootstrap-modal

Question

I have two bootstrap modals on a page. The first one (Modal_Add) will not work except if the second one (Modal_Edit) is first opened. The text boxes will not be clickable and nothing can be typed. But when I open the second one - without doing anything on it - and close, then open the first that was not working, it works. below are the codes
<!-- MODAL ADD -->
<form id="add_form" enctype="multipart/form-data">
<div class="modal fade" id="myModal" role="dialog" tabindex="-1" aria-labelledby="exampleModalLabelA" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title" id="exampleModalLabelB">Add New Member</h5>
</div>
<div class="modal-body">
<div class="container-fluid">
<input type="hidden" name="member_units" id="member_units" value="<?php if (isset($units_code)){echo $units_code;}?>" class="form-control">
<div class="row-fluid">
<div class="span6">
<div class="col-md-8">
<label class="col-form-label">Entrance Fee</label>
</div>
</div>
<div class="span6">
<div class="col-md-8">
<input type="text" name="entrance_amount" id="entrance_amount" class="form-control" placeholder="Entrance Fee">
<span id="entrance_amount_error" class="label label-important"></span>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<label class="col-md-4 col-form-label">Member Name</label>
<div class="col-md-8">
<input type="text" name="member_name" id="member_name" class="form-control" placeholder="Name"> <span id="member_name_error" class="label label-important"></span>
</div>
</div>
<div class="span6">
<label class="col-md-4 col-form-label">Address</label>
<div class="col-md-8">
<input type="text" name="member_address" id="member_address" class="form-control" placeholder="Address">
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<label class="col-md-4 col-form-label">Member Phone</label>
<div class="col-md-8">
<input type="text" maxlength="11" name="member_phone" id="member_phone" class="form-control" placeholder="Phone">
<span id="member_phone_error" class="label label-important"></span>
</div>
</div>
<div class="span6">
<label class="col-md-4 col-form-label">Gender Status</label>
<div class="col-md-8">
<select name="gender_status" id="gender_status" class="form-control tooltips" data-trigger="hover" data-original-title="choose a Gender Status" >
<option value="0">--select--</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="company">Company</option>
<option value="society">Society</option>
</select>
<span id="gender_status_error" class="label label-important"></span>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<label class="col-md-4 col-form-label">Banker</label>
<div class="col-md-8">
<input type="text" name="banker" id="banker" class="form-control" placeholder="Banker">
<span id="banker_error" class="label label-important"></span>
</div>
</div>
<div class="span6">
<label class="col-md-4 col-form-label">Account Number</label>
<div class="col-md-8">
<input type="text" name="accountno" id="accountno" class="form-control" placeholder="Account Number" maxlength="10">
<span id="accountno_error" class="label label-important"></span>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<label class="col-md-4 col-form-label" id="g-label">Guarantors</label>
<div class="col-md-8">
<select data-placeholder="Type Guarantors" name="guarantors[]" id="guarantors" class="chosen" multiple="multiple">
<!-- <option value="0">A</option> -->
</select>
</div>
</div>
<div class="span6">
<label class="col-md-4 col-form-label">Means of ID</label>
<div class="col-md-8">
<input type="text" maxlength="11" name="id_means" id="id_means" class="form-control" placeholder="Type your NIN">
<span id="id_means_error" class="label label-important"></span>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<label class="col-md-4 col-form-label">Date Joined</label>
<div class="col-md-8">
<input type="date" name="date_joined" id="date_joined" class="form-control datepicker" value="<?php echo date('Y-m-d'); ?>">
</div>
</div>
<div class="span6">
<label class="col-md-4 col-form-label">Upload Passport</label>
<div class="col-md-8">
<input type='file' name='userfile' size='20' />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="btn_save" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</form>
<!--END MODAL ADD-->
<!-- MODAL EDIT -->
<form id="edit_form" enctype="multipart/form-data">
<div class="modal fade" id="Modal_Edit" role="dialog" tabindex="-1" aria-labelledby="exampleModalLabelE" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title" id="exampleModalLabelF">Edit Member</h5>
</div>
<div class="modal-body">
<div class="container-fluid">
<input type="hidden" name="member_units" id="member_units" value="<?php if (isset($units_code)){echo $units_code;}?>" class="form-control">
<div class="row-fluid">
<label class="col-md-4 col-form-label">Union Code</label>
<div class="col-md-8">
<input type="hidden" name="member_code_edit" id="member_code_edit" class="form-control" placeholder="Member Code" readonly>
<input type="text" name="union_code_edit" id="union_code_edit" class="form-control" placeholder="Union Code" readonly>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<label class="col-md-4 col-form-label">Member Name</label>
<div class="col-md-8">
<input type="text" name="member_name_edit" id="member_name_edit" class="form-control" placeholder="Name">
<span id="member_name_edit_error" class="label label-important"></span>
</div>
</div>
<div class="span6">
<label class="col-md-4 col-form-label">Address</label>
<div class="col-md-8">
<input type="text" name="member_address_edit" id="member_address_edit" class="form-control" placeholder="Address">
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<label class="col-md-4 col-form-label">Member Phone</label>
<div class="col-md-8">
<input type="text" maxlength="11" name="member_phone_edit" id="member_phone_edit" class="form-control" placeholder="Phone">
<span id="member_phone_edit_error" class="label label-important"></span>
</div>
</div>
<div class="span6">
<label class="col-md-4 col-form-label">Means of ID</label>
<div class="col-md-8">
<input type="text" maxlength="11" name="id_means_edit" id="id_means_edit" class="form-control" placeholder="Type your NIN">
<span id="id_means_edit_error" class="label label-important"></span>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<label class="col-md-4 col-form-label">Banker</label>
<div class="col-md-8">
<input type="text" name="banker_edit" id="banker_edit" class="form-control" placeholder="Banker">
<span id="banker_edit_error" class="label label-important"></span>
</div>
</div>
<div class="span6">
<label class="col-md-4 col-form-label">Account Number</label>
<div class="col-md-8">
<input type="text" name="accountno_edit" id="accountno_edit" class="form-control" placeholder="Account Number" maxlength="10">
<span id="accountno_edit_error" class="label label-important"></span>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<label class="col-md-4 col-form-label">Date Joined</label>
<div class="col-md-8">
<input type="date" name="date_joined_edit" id="date_joined_edit" class="form-control datepicker" value="" readonly="">
</div>
</div>
<div class="span6">
<label class="col-md-4 col-form-label">Upload Passport</label>
<div class="col-md-8">
<input type='file' name='userfile_edit' size='20'/>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<label class="col-md-4 col-form-label" id="g-label">Current Guarantors</label>
<div class="col-md-8">
<div id="current_gurantors"></div>
<!-- <option value="0">A</option> -->
</div>
</div>
<div class="span6">
<label class="col-md-4 col-form-label" id="g-label">Guarantors</label>
<div class="col-md-8">
<select data-placeholder="Type Guarantors" name="guarantors_edit[]" id="guarantors_edit" class="chosen" multiple="multiple">
<!-- <option value="0">A</option> -->
</select>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="btn_update" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
</form>
<!--END MODAL EDIT-->
However, when i put the code for Modal_Edit on top of the code for Modal_Add, the problem affects Modal_Edit and vice versa
Edited
when I copied the code to https://www.codeply.com/p?starter=Bootstrap it works fine. What could be the problem?