1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Editable table remove button works but add/plus button doesn't work

iliketheinterwebs pro asked 6 years ago

Hi,   My editable table in section 9.a of my code add/plus button does not work. The remove button is functional. How do I get the code add/plus button to work? Also after I added the editable table the regular spacing below my div between 9.a and 9.b disappeared and they are right next to each other now instead of having a couple centimeters of space. TIA for your help.   HTML CODE 
Start your code here
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Permitting for PMNM</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- Editable Table CSS --> <link href="css/table-editable.css" rel="stylesheet"> <style> .mdb-select { width: 97%; padding-left: 2.8rem; } .permit-category { width: 97%; padding-left: 4.0rem; } .md-form .prefix~input, .md-form .prefix~textarea { margin-left: 4rem; width: -webkit-calc(100% - 4rem); width: calc(100% -4rem); } .md-form .prefix~label { margin-left: 4rem; } .no-icon { margin-left: 4rem; } </style> </head> <!-- Start your project here--> <body class="fixed-sn mdb-skin"> <header> <!--Double navigation inlcude--> <div id="nav"> <?php include('includes/nav.php'); ?> </div> <!--/.Double navigation include--> </header> <!-- Modals --> <!-- Modal Permit Category --> <div class="modal fade" id="permitCategoryModal" tabindex="-1" role="dialog" aria-labelledby="permitCategoryModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="permitCategoryModalLabel">Permit Categories</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <b>Conservation & Management -</b> <p>assists in the conservation and management of the Monument.</p> <b>Education -</b> <p>furthers the educational value of the Monument.</p> <b>Native Hawaiian Practices -</b> <p>cultural activities conducted for the purposes of perpetuating traditional knowledge, caring for and protecting the environment, and strengthening cultural and spiritual connections to the Northwestern Hawaiian Islands that have demonstrable benefits to the Native Hawaiian community.</p> <b>Recreation -</b> <p>activities conducted for personal enjoyment that do not result in the extraction of Monument resources and that do not involve a fee-for-service transaction.</p> <b>Research -</b> <p>activities designed to further understanding of Monument resources and qualities.</p> <b>Special Ocean Use -</b> <p>activities engaged in to generate revenue or profits for one or more of the persons associated with the...[need access to site]</p> </div> </div> </div> </div> <!--/ .Modal Permit Category --> <!--Main Layout--> <main> <!-- Nav tabs --> <ul class="nav nav-tabs orange nav-justified"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#panel1" role="tab">Summary</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#panel2" role="tab">Personnel</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#panel3" role="tab">Project</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#panel4" role="tab">Criteria/Findings</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#panel5" role="tab">Other Info</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#panel6" role="tab">Uploads</a> </li> </ul> <!-- Tab panels --> <div class="tab-content card"> <!--Panel 1--> <div class="tab-pane fade in show active" id="panel1" role="tabpanel"> <br> <!-- Text --> <p class="mb-1 dark-grey-text text-center">This Permit Application Cover Sheet is intented to provide summary information and status to the public on permit applications for activities proposed to be conducted in the Papahānaumokuākea Marine National Monument. While a permit application has been received, it has not been fully reviewewd nor approved by the Monument Management Board to date. The Monument permit process also ensures that all environmental reviews are conducted prior to the issuance of a Monument permit.</p> <p class="mb-1 dark-grey-text text-center">* indicates a required field</p> <!-- Extended material form grid --> <form> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <i class="fa fa-user prefix grey-text"></i> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Applicant Name" data-content="The name of the person who is in charge of the proposed activity and who will be responsible for all the personnel and actions under the authority of the requested Monument permit."></i> <input type="text" class="form-control" id="inputFirstName"> <label for="inputFirstName">First Name*</label> </div> </div> <!--/ .Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputMiddleInitial"> <label for="inputMiddleInitial">Middle Initial</label> </div> </div> <!--/ .Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputLastName"> <label for="inputLastName">Last Name*</label> </div> </div> <!--/ .Grid column --> </div> <!--/ .Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12"> <!-- Material input --> <div class="md-form form-group"> <i class="fa fa-book prefix grey-text"></i> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Affiliation" data-content="..."></i> <input type="text" class="form-control" id="inputAffiliation"> <label for="inputAffiliation">Affiliation</label> </div> </div> <!--/ .Grid column --> </div> <!--/ .Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="md-form col-md-4"> <i class="fa fa-folder prefix grey-text"></i> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="modal" data-target="#permitCategoryModal"></i> <!-- Material input --> <select class="mdb-select permit-category colorful-select dropdown-warning"> <option value="" disabled selected>Select Permit Category*</option> <option value="1">Research</option> <option value="2" selected>Education</option> <option value="3">Conservation and Management</option> <option value="4">Native Hawaiian Practices</option> <option value="5">Special Ocean Use</option> <option value="6">Recreation</option> </select> </div> <!--/ .Grid column --> </div> <!--/ .Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form"> <i class="fa fa-calendar prefix grey-text"></i> <input type="text" class="form-control datepicker" id="inputDatePicker"> <label for="inputDatePicker">Start Date*</label> </div> </div> <!--/ .Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form"> <input type="text" class="form-control datepicker" id="inputDatePicker"> <label for="inputDatePicker">End Date*</label> </div> </div> <!--/ .Grid column --> </div> <!--/ .Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12"> <!-- Material input --> <div class="md-form form-group"> <i class="fa fa-book prefix grey-text"></i> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Project Title" data-content="Provide a descriptive title for your proposed project."></i> <input type="text" class="form-control" id="inputProject"> <label for="inputProject">Project Name</label> </div> </div> <!--/ .Grid column --> </div> <!--/ .Grid row --> <!-- Grid row --> <div class="form-row form-inline no-icon"> <!-- Inline form with checkboxes --> <p class="dark-grey-text"> Proposed Method of Entry:</p> <!-- Default checkbox --> <div class="form-check"> <input class="form-check-input" type="checkbox" id="inlineFormCheckbox1"> <label class="form-check-label" for="inlineFormCheckbox1">Vessel</label> </div> <!-- Default checkbox --> <div class="form-check"> <input class="form-check-input" type="checkbox" id="inlineFormCheckbox2"> <label class="form-check-label" for="inlineFormCheckbox2">Plane</label> </div> </div> <!--/ .Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12"> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputVessel"> <label for="inputVessel">Vessel name/identification if known:</label> </div> </div> <!--/ .Grid column --> </div> <!--/ .Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Proposed Locations" data-content="..."></i> <!-- Material input --> <div class="form-group no-icon dark-grey-text"> <label for="proposedLocations">Proposed Locations</label> <textarea class="form-control" id="proposedLocations" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Estimated # of people" data-content="Estimated number of individuals (including Applicant) to be covered under this permit. If unknown at the time of this application, use your best estimate available. An accurate number of people must be provided within the Compliance Information Sheet:"></i> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputPeopleAmount"> <label for="inputPeopleAmount">Estimated number of individuals (including Applicant) to be covered under this permit.</label> </div> </div> <!--/ .Grid column --> </div> <!--/ .Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Estimated # of days" data-content="..."></i> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputDays"> <label for="inputDays">Estimated number of days in the monument:</label> </div> </div> <!--/ .Grid column --> </div> <!--/ .Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12"> <p class="dark-grey-text no-icon">Description of proposed activities: (complete these sentences):</p> <!-- Material input --> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="The proposed activity would..." data-content="..."></i> <div class="form-group no-icon dark-grey-text"> <label for="proposedLocations">The proposed activity would...</label> <textarea class="form-control" id="proposedLocations" rows="5"></textarea> </div> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="To accomplish this activity we would..." data-content="..."></i> <div class="form-group no-icon dark-grey-text"> <label for="proposedLocations">To accomplish this activity we would...</label> <textarea class="form-control" id="proposedLocations" rows="5"></textarea> </div> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="This activity would help the Monument by..." data-content="..."></i> <div class="form-group no-icon dark-grey-text"> <label for="proposedLocations">This activity would help the Monument by...</label> <textarea class="form-control" id="proposedLocations" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--/ .Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Other info" data-content="..."></i> <!-- Material input --> <div class="form-group no-icon dark-grey-text"> <label for="proposedLocations">Other information or background...</label> <textarea class="form-control" id="proposedLocations" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--/ .Grid row --> </form> <!--/ .Extended material form grid --> <!-- Buttons next save back --> <a href="#!" class="orange-text d-flex flex-row-reverse p-2"> <button type="button" class="btn blue-gradient btn-lg">Next</button> <button type="button" class="btn peach-gradient btn-lg">Save</button> <button type="button" class="btn blue-gradient btn-lg">Back</button> </a> </div> <!--/.Panel 1--> <!--Panel 2--> <div class="tab-pane fade" id="panel2" role="tabpanel"> <br> <!-- Text --> <p class="mb-1 dark-grey-text text-center">Applicant Information</p> <p class="mb-1 dark-grey-text text-center">* indicates required field</p> <!-- Extended material form grid --> <form> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <p class="dark-grey-text font-weight-bold">1. Applicant</p> </div> <!--/.Grid column --> </div> <!--/.Grid Row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Applicant Name" data-content="The name of the person who is in charge of the proposed activity and who will be responsible for all the personnel and actions under the authority of the requested Monument permit."></i> <input type="text" class="form-control" id="inputFirstName"> <label for="inputFirstName">First Name*</label> </div> </div> <!--/.Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputMiddleInitial"> <label for="inputMiddleInitial">Middle Initial</label> </div> </div> <!--/ .Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputLastName"> <label for="inputLastName">Last Name*</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12"> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputTitle"> <label for="inputTitle">Title</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <p class="dark-grey-text font-weight-bold">1a. Intended field Principal Investigator</p> </div> <!--/.Grid column --> </div> <!--/.Grid Row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Field Principal Investigator" data-content="..."></i> <input type="text" class="form-control" id="inputFieldFirstName"> <label for="inputFieldFirstName">Field PI First Name</label> </div> </div> <!--/. Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputFieldMiddleInitial"> <label for="inputFieldMiddleInitial">Field PI Middle Initial</label> </div> </div> <!--/. Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputFieldLastName"> <label for="inputFieldLastName">Field PI Last Name</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12"> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputFieldTitle"> <label for="inputFieldTitle">Field PI Title</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12"> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputAffiliation"> <label for="inputAffiliation">Field PI Affiliation</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12"> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputStreetAddress"> <label for="inputStreetAddress">Field PI Mailing Address/P.O. Box</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputCity"> <label for="inputCity">City</label> </div> </div> <!--/. Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputState"> <label for="inputState">State</label> </div> </div> <!--/. Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputZipCode"> <label for="inputZipCode">Zip/International Postal Code</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-5"> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputCountry"> <label for="inputCountry">Country</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col-md-2"> <!-- Material input --> <div class="md-form form-group"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Phone Country Code" data-content="Phone Country Code (e.g. United States= 001)"></i> <input type="text" class="form-control" id="inputPhoneCountryCode"> <label for="inputPhoneCountryCode">Country Code:</label> </div> </div> <!--/. Grid column --> <!-- Grid column --> <div class="col-md-5"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputPhone"> <label for="inputPhone">Phone Number:</label> </div> </div> <!--/. Grid column --> <!-- Grid column --> <div class="col-md-5"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputFax"> <label for="inputFax">Fax:</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-5"> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputEmail"> <label for="inputEmail">Email</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <p class="dark-grey-text font-weight-bold">2. Mailing Address</p> </div> <!--/.Grid column --> </div> <!--/.Grid Row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12"> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputStreetAddress"> <label for="inputStreetAddress">Mailing Address/P.O. Box</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputCity"> <label for="inputCity">City</label> </div> </div> <!--/. Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputState"> <label for="inputState">State</label> </div> </div> <!--/. Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputZipCode"> <label for="inputZipCode">Zip/International Postal Code</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-5"> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputCountry"> <label for="inputCountry">Country</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col-md-2"> <!-- Material input --> <div class="md-form form-group"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Phone Country Code" data-content="Phone Country Code (e.g. United States= 001)"></i> <input type="text" class="form-control" id="inputPhoneCountryCode"> <label for="inputPhoneCountryCode">Country Code:</label> </div> </div> <!--/. Grid column --> <!-- Grid column --> <div class="col-md-5"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputPhone"> <label for="inputPhone">Phone Number:</label> </div> </div> <!--/. Grid column --> <!-- Grid column --> <div class="col-md-5"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputFax"> <label for="inputFax">Fax:</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-5"> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputEmail"> <label for="inputEmail">Email</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="form-row"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Field Principal Investigator" data-content="..."></i> <!-- Grid column --> <div class="col"> <p class="dark-grey-text font-weight-bold">For students, major professor's name, telephone and email address:</p> </div> <!--/.Grid column --> </div> <!--/.Grid Row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputFirstName"> <label for="inputFirstName">First Name</label> </div> </div> <!--/. Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputMiddleInitial"> <label for="inputMiddleInitial">Middle Initial</label> </div> </div> <!--/. Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputLastName"> <label for="inputLastName">Last Name</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputPhone"> <label for="inputPhone">Phone:</label> </div> </div> <!--/. Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputFax"> <label for="inputFax">Fax:</label> </div> </div> <!--/. Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputEmail"> <label for="inputEmail">Email</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <p class="dark-grey-text font-weight-bold">3. Affiliation</p> </div> <!--/.Grid column --> </div> <!--/.Grid Row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputAffiliation"> <label for="inputAffiliation">Affiliation</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <p class="dark-grey-text font-weight-bold">4.Additional persons to be covered by permit: *</p> </div> <!--/.Grid column --> </div> <!--/.Grid Row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group no-icon"> <input type="text" class="form-control" id="inputFirstName"> <label for="inputFirstName">First Name</label> </div> </div> <!--/. Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputMiddleInitial"> <label for="inputMiddleInitial">Middle Initial</label> </div> </div> <!--/. Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputLastName"> <label for="inputLastName">Last Name</label> </div> </div> <!--/. Grid column --> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="inputLastName"> <label for="inputLastName">Role</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <button type="button" class="btn btn-outline-warning waves-effect"> Add New</button> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> </form> <!--/. Extended material form grid --> <!-- Link --> <a href="#!" class="orange-text d-flex flex-row-reverse p-2"> <button type="button" class="btn blue-gradient btn-lg">Next</button> <button type="button" class="btn peach-gradient btn-lg">Save</button> <button type="button" class="btn blue-gradient btn-lg">Back</button> </a> </div> <!--/.Panel 2--> <!--Panel 3--> <div class="tab-pane fade" id="panel3" role="tabpanel"> <br> <p class="mb-1 dark-grey-text text-center">Project Information</p> <p>*indicated a required field</p> <!-- Extended material form grid --> <form> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <p class="dark-grey-text font-weight-bold">5a. Project Location(s):</p> <!--Table--> <table class="table table-bordered table-responsive-md"> <!--Table head--> <thead> <tr> <th>Location</th> <th>Land-based</th> <th>Ocean-based: Shallow water</th> <th>Ocean-based: Deep water</th> </tr> </thead> <!--Table head--> <!--Table body--> <tbody> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Nihoa</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Necker Island (Mokumanamana)</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">French Frigate Shoals</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Gardner Pinnacles</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Maro Reef</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Laysan Island</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Lisianski Island, Neva Shoal</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Pearl and Hermes Atoll</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Midway Atoll</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Kure Atoll</label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1"></label> </div> </td> </tr> <tr> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tableMaterialCheck1"> <label class="form-check-label" for="tableMaterialCheck1">Other</label> </div> </td> <td></td> <td></td> <td></td> </tr> </tbody> <!--/.Table body--> </table> <!--/.Table--> <!--Table--> <table class="table table-borderless"> <!--Table head--> <thead> <tr> <th></th> <th></th> </tr> </thead> <!--Table head--> <!--Table body--> <tbody> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Remaining ashore on any island or atoll (with the exception of Midway & Kure Atolls and field camp staff on other islands/atolls) between sunset and sunrise.</td> </tr> </tbody> <!--Table body--> </table> <!--Table--> </div> <!--/.Grid column --> </div> <!--/.Grid Row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <p class="grey-text">NOTE: Shallow water is defined by water less than 100 meters in depth.</p> <p class="grey-text">NOTE: There is a fee schedule for people visiting Midway Atoll National Wildlife via vessel and aircraft.</p> </div> <!--/.Grid column --> </div> <!--/.Grid Row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Location Description" data-content="..."></i> <!-- Material input --> <div class="form-group dark-grey-text"> <label for="proposedLocations">Location Description:</label> <textarea class="form-control" id="proposedLocations" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <p class="dark-grey-text font-weight-bold">5b. Check all applicable regulated activities proposed to be conducted in the Monument:</p> <!--Table--> <table class="table table-borderless"> <!--Table head--> <thead> <tr> <th></th> <th></th> </tr> </thead> <!--Table head--> <!--Table body--> <tbody> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Removing, moving, taking, harvesting, posseessing, injuring, disturbing, or damaging any living or nonliving Monument resource</td> </tr> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Drilling into, dredging, or otherwise altering the submerged lands other than by anchoring a vessel; or constructing, placing, or abandoning any structure, material, or other matter on the submerged lands</td> </tr> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Anchoring a vessel</td> </tr> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Deserting a vessel aground, at anchor, or adrift</td> </tr> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Discharging or depositing any material or matter into the Monument</td> </tr> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Touching coral, living or dead</td> </tr> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Possessing fishing gear except when stowed and not available for immediate use during passage without interruption through the Monument</td> </tr> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Attracting any living Monument resource</td> </tr> <tr> <th scope="row" class="pr-md-3 pr-5"> <input type="checkbox" class="filled-in" id="checkbox124"> <label for="checkbox124" class="label-table"></label> </th> <td>Sustenance fishing (Federal waters only, outside of Special Preservation Areas, Ecological Reserves and Special Management Areas)</td> </tr> </tbody> <!--Table body--> </table> <!--Table--> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12"> <i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="padding-left: 2rem; margin-top: -1rem; font-size: 1.1rem;" data-toggle="popover" data-placement="right" title="Help - Purpose/Need/Scope" data-content="..."></i> <!-- Material input --> <div class="form-group dark-grey-text font-weight-bold"> <label for="proposedActivities">6. Purpose/Need/Scope (State purpose of proposed activities)*:</label> <textarea class="form-control" id="proposedActivities" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <p class="dark-grey-text">*Considering the purpose of the proposed activities, do you intend to film / photograph federally protected species?</p> <!-- Form inline with radios --> <form class="form-inline"> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadiosInline1" value="option1" checked> <label class="form-check-label" for="exampleRadiosInline1"> Yes </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadiosInline2" value="option2"> <label class="form-check-label" for="exampleRadiosInline2"> No </label> </div> </form> <!-- Form inline with radios --> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text"> <label for="filmPhotograph">If so, please list the species you specifically intend to target.</label> <textarea class="form-control" id="filmPhotograph" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Text and Links --> <p class="mb-0">For a list of terrestrial species protected under the Endangered Species Act visit:</p> <a href="http://www.fws.gov/endangered/">http://www.fws.gov/endangered/</a> <p class="mt-3 mb-0">For a list of marine species protected under the Endangered Species Act visit:</p> <a href="http://www.nmfs.noaa.gov/pr/species/esa/">http://www.nmfs.noaa.gov/pr/species/esa/</a> <p class="mt-3 mb-0">For information about species protected under the Marine Mammal Protection Act visit:</p> <a href="http://www.nmfs.noaa.gov/pr/laws/mmpa/">http://www.nmfs.noaa.gov/pr/laws/mmpa/</a> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <p class="dark-grey-text font-weight-bold mt-3">7. Answer the Findings below by providing information that you believe will assist the Co-Trustees in determining how your proposed activities are compatible with the conservation and management of the natural, historic, and cultural resources of the Monument:</p> <p class="dark-grey-text">The Findings are as follows:</p> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text"> <label for="activitySafeguards">a. How can the activity be conducted with adequate safeguards for the cultural, natural, and historic resources and ecological integrity of the Monument?</label> <textarea class="form-control" id="activitySafeguards" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text"> <label for="activityCompatible">b. How will the activity be conducted in a manner compatible with the management direction of this proclamation, considering the extent to which the conduct of the activity may diminish or enhance Monument cultural, natural, and historic resources, qualities, and ecological integrity, any indirect, secondary, or cumulative effects of the activity, and the duration of such effects?</label> <textarea class="form-control" id="activityCompatible" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text"> <label for="activityAlternative">c.Is there a practicable alternative to conducting the activity within the Monument? If not, explain why your activities must be conducted in the Monument.</label> <textarea class="form-control" id="activityAlternative" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text"> <label for="activityValue">d. How does the end value of the activity outweight its adverse impacts on the Monument culural, natural and historic resources, qualities, and ecological integrity?</label> <textarea class="form-control" id="activityValue" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text"> <label for="activityDuration">e. Explain how the duration of the activity is no longer than necessary to achieve its stated purpose?</label> <textarea class="form-control" id="activityDuration" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text"> <label for="activityQualification">f. Provide information demonstrating that you are qualified to conduct and complete the activity and mitigate any potential impacts resulting from its conduct?</label> <textarea class="form-control" id="activityQualification" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text"> <label for="activityMethods">h. Explain how your methods and procedures are appropriate to acheive the proposed activity's goals in relation to their impacts to Monument cultural, natural, and historic resources, qualities, and ecological integrity?</label> <textarea class="form-control" id="activityMethods" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text"> <label for="vesselComply">i. Has your vessel been outfitted with a mobile transceiver unit approved by OLE and complies wth the requirements of Presidential Proclamation 8031?</label> <textarea class="form-control" id="vesselComply" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text"> <label for="activityOther">j. Demonstrate that there are no other factors that would make the issuance of a permit for the activity inappropriate?</label> <textarea class="form-control" id="activityOther" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text font-weight-bold"> <label for="proceduresMethods">8. Procedures/Methods:</label> <p class="dark-grey-text font-weight-bold">NOTE: If land or marine archaeological activities are involved, contact the Monument Permit Coordinator at the address on the general application before proceeding.</p> <textarea class="form-control" id="proceduresMethods" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <p class="dark-grey-text font-weight-bold">9a. Collection of specimens - collecting activities (would apply to any activity): organisms or objects (List of species):</p> </div> <!--/.Grid column --> </div> <!--/.Grid Row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Editable table --> <div class="card"> <div class="card-body"> <div id="table" class="table-editable"> <span class="table-add float-right mb-3 mr-2"><a href="#!" class="text-success"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></a></span> <table class="table table-bordered table-responsive-md table-striped text-center"> <tr> <th class="text-center">Common Name</th> <th class="text-center">Scientific Name</th> <th class="text-center">Sample Count</th> <th class="text-center">Unit Size</th> <th class="text-center">Location</th> <th class="text-center">Whole/Partial Organism</th> <th class="text-center">Sort</th> <th class="text-center">Remove</th> </tr> <tr> <td class="pt-3-half" contenteditable="true"></td> <td class="pt-3-half" contenteditable="true"></td> <td class="pt-3-half" contenteditable="true"></td> <td class="pt-3-half" contenteditable="true"></td> <td class="pt-3-half" contenteditable="true"></td> <td class="pt-3-half" contenteditable="true"></td> <td class="pt-3-half"> <span class="table-up"><a href="#!" class="indigo-text"><i class="fa fa-long-arrow-up" aria-hidden="true"></i></a></span> <span class="table-down"><a href="#!" class="indigo-text"><i class="fa fa-long-arrow-down" aria-hidden="true"></i></a></span> </td> <td> <span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span> </td> </tr> <!-- This is our clonable table line --> <tr> <td class="pt-3-half" contenteditable="true"></td> <td class="pt-3-half" contenteditable="true"></td> <td class="pt-3-half" contenteditable="true"></td> <td class="pt-3-half" contenteditable="true"></td> <td class="pt-3-half" contenteditable="true"></td> <td class="pt-3-half" contenteditable="true"></td> <td class="pt-3-half"> <span class="table-up"><a href="#!" class="indigo-text"><i class="fa fa-long-arrow-up" aria-hidden="true"></i></a></span> <span class="table-down"><a href="#!" class="indigo-text"><i class="fa fa-long-arrow-down" aria-hidden="true"></i></a></span> </td> <td> <span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span> </td> </tr> </table> </div> </div> </div> <!-- Editable table --> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text font-weight-bold"> <label for="afterSpecimen">9b. What will be done with the specimens after the project has ended?:</label> <textarea class="form-control" id="afterSpecimen" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <p class="dark-grey-text font-weight-bold">9c. Will the organism be kept alive after collection?</p> <!-- Form inline with radios --> <form class="form-inline"> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadiosInline1" value="option1" checked> <label class="form-check-label" for="exampleRadiosInline1"> Yes </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadiosInline2" value="option2"> <label class="form-check-label" for="exampleRadiosInline2"> No </label> </div> </form> <!-- Form inline with radios --> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="md-form form-group"> <input type="text" class="form-control" id="siteLocation"> <label for="siteLocation">*Specific site/location:</label> </div> </div> <!--/. Grid column --> </div> <!--/. Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <p class="dark-grey-text">Is it an open or closed system?</p> <!-- Form inline with radios --> <form class="form-inline"> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="open" value="option1" checked> <label class="form-check-label" for="openRadio"> Open </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="closedRadio" value="option2"> <label class="form-check-label" for="closedRadio"> Closed </label> </div> </form> <!-- Form inline with radios --> </div> <!--/ .Grid column --> </div> <!--/.Grid row--> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <p class="dark-grey-text">Is there an outfall?</p> <!-- Form inline with radios --> <form class="form-inline"> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadiosInline1" value="option1" checked> <label class="form-check-label" for="exampleRadiosInline1"> Yes </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadiosInline2" value="option2"> <label class="form-check-label" for="exampleRadiosInline2"> No </label> </div> </form> <!-- Form inline with radios --> </div> <!--/ .Grid column --> </div> <!--/.Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text"> <label for="housedOrganisms">Will these organisms be housed with other organisms? If so, what are the other organisms?</label> <textarea class="form-control" id="housedOrganisms" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text"> <label for="organismsReleased">Will organisms be released? If so, what are they?</label> <textarea class="form-control" id="organismsReleased" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text font-weight-bold"> <label for="samplesTransported">10.If applicable, how will the collected samples be transported out of the Monument?</label> <textarea class="form-control" id="samplesTransported" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text font-weight-bold"> <label for="activityCurriculum">11.Is your proposed activity based on a Department of Education Standards Based Curriculum? If so, describe:</label> <textarea class="form-control" id="activityCurriculum" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text font-weight-bold"> <label for="activityCollab">12. If applicable, describe how you are collaborating with others in any way to reduce duplicative activities in the Monument or elsewhere?</label> <textarea class="form-control" id="activityCollab" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text font-weight-bold"> <label for="activityPublish">13.What materials, products or deliverables will be developed as a result of your proposed activity? Provide a time line for write-up and publication of information or production of educational materials:</label> <textarea class="form-control" id="activityPublish" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text font-weight-bold"> <label for="gearMaterials">14.List all specialized gear and materials to be used in this activity:</label> <textarea class="form-control" id="gearMaterials" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text font-weight-bold"> <label for="hazardous">15.List all Hazardous Materials you propose to take to and use within the Monument:</label> <textarea class="form-control" id="hazardous" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text font-weight-bold"> <label for="fixedInstallations">Describe any fixed installations and instrumentation proposed to be set in the Monument:</label> <textarea class="form-control" id="fixedInstallations" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text font-weight-bold"> <label for="applicantPublication">17.List all Applicants' publications/references directly related to the proposed project:</label> <textarea class="form-control" id="applicantPublication" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Tab Nav Buttons --> <a href="#!" class="orange-text d-flex flex-row-reverse p-2"> <button type="button" class="btn blue-gradient btn-lg">Next</button> <button type="button" class="btn peach-gradient btn-lg">Save</button> <button type="button" class="btn blue-gradient btn-lg">Back</button> </a> <!--/. Tab Nav Buttons --> </form> <!--/. Extended material form grid --> </div> <!--/.Panel 3--> <!--Panel 4--> <div class="tab-pane fade" id="panel4" role="tabpanel"> <br> <p class="text-center">Critical Findings</p> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <p class="dark-grey-text font-weight-bold mt-3">12. Answer the Findings below by providing information that you believe will assist the Co-Trustees in determining how your proposed activities are compatible with the conservation and management of the natural, historic, and cultural resources of the Monument:</p> <p class="dark-grey-text">The Findings are as follows:</p> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> <!-- Grid row --> <div class="form-row"> <!-- Grid column --> <div class="col"> <!-- Material input --> <div class="form-group dark-grey-text"> <label for="activitySafeguards">a. How can the activity be conducted with adequate safeguards for the cultural, natural, and historic resources and ecological integrity of the Monument?</label> <textarea class="form-control" id="activitySafeguards" rows="5"></textarea> </div> </div> <!--/ .Grid column --> </div> <!--. /Grid row --> </div> <!--/.Panel 4--> <!--Panel 5--> <div class="tab-pane fade" id="panel5" role="tabpanel"> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p> </div> <!--/.Panel 5--> <!--Panel 6--> <div class="tab-pane fade" id="panel6" role="tabpanel"> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p> </div> <!--/.Panel 6--> </div> <!--/.Tab Panels--> </main> <!--/.Main Layout--> <!--/.Start your project here--> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> <!-- Editable Table JavaScript --> <script type="text/javascript" src="js/table-editable.js"></script> <!--SideNav Button Initialization--> <script> $(".button-collapse").sideNav(); // SideNav Scrollbar Initialization var sideNavScrollbar = document.querySelector('.custom-scrollbar'); Ps.initialize(sideNavScrollbar); // popovers Initialization $(function () { $('[data-toggle="popover"]').popover() }) // Data Picker Initialization $('.datepicker').pickadate(); // Material Select Initialization $(document).ready(function() { $('.mdb-select').material_select(); }); </script> </body> </html>   CSS CODE 
Start your code here.pt-3-half {
padding-top: 1.4rem;
}

JS CODE
var $TABLE = $('#table'); var $BTN = $('#export-btn'); var $EXPORT = $('#export'); $('.table-add').click(function () { var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line'); $TABLE.find('table').append($clone); }); $('.table-remove').click(function () { $(this).parents('tr').detach(); }); $('.table-up').click(function () { var $row = $(this).parents('tr'); if ($row.index() === 1) return; // Don't go above the header $row.prev().before($row.get(0)); }); $('.table-down').click(function () { var $row = $(this).parents('tr'); $row.next().after($row.get(0)); }); // A few jQuery helpers for exporting only jQuery.fn.pop = [].pop; jQuery.fn.shift = [].shift; $BTN.click(function () { var $rows = $TABLE.find('tr:not(:hidden)'); var headers = []; var data = []; // Get the headers (add special header logic here) $($rows.shift()).find('th:not(:empty)').each(function () { headers.push($(this).text().toLowerCase()); }); // Turn all existing rows into a loopable array $rows.each(function () { var $td = $(this).find('td'); var h = {}; // Use the headers from earlier to name our hash keys headers.forEach(function (header, i) { h[header] = $td.eq(i).text(); }); data.push(h); }); // Output the result $EXPORT.text(JSON.stringify(data)); });

Piotr Glejzer staff commented 6 years ago

Hello, I think you can do something like - create new function what will has variables with every 'td' value - create variable what will +="</tr><td>" + name +"</td><td>" + size +"</td><td>" + remove +"</td></tr>" " etc - name, size, remove etc are variable connection with your table ( var name = $('.name'); ) ; - you can add that clases like that : <td class="pt-3-half name" contenteditable="true"></td> - attendTo that clickable variable to you table. It should be work

iliketheinterwebs pro commented 6 years ago

Hi Piotr. Thank you for your response. I don't understand why the "Remove" button works without any extra code but the "plus" button needs more code. Can you explain this for me?

Piotr Glejzer staff commented 6 years ago

It's weird. I'm gonna think more about that. When I deleted your code and I put only editable table and javascript to that table everything is working perfectly.

Piotr Glejzer staff commented 6 years ago

OK, I know why it is not working. Is something wrong with your js and HTML code with this editable table. If you put again exactly the same code like in example it is working well. I also had a problem with your sidenav code so I removed it.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Opened

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags
About author
iliketheinterwebs
Pro User 7Support score
16Questions 0Answers 0Snippets