Add child entry in membership form

public/parts/signup.php

@@ -162,6 +162,26 @@
                         <label class="form-check-label" for="photo_permission">No</label>
                     </span>
 
+                <hr />
+
+                <p>
+                    Please list your children's first names and birth dates.  This
+                    information will appear in our members’ directory.  Members
+                    agree that they will NOT make this information public.
+
+                <div class="list-group" id="child_list">
+                    <?php
+                    for ($i = 0; $i < 2; $i++) {
+                        include __DIR__ . "/template_child_entry.php";
+                    }
+                    ?>
+                </div>
+
+                <div class="btn btn-sm btn-primary mt-1" id="add_child_row">
+                    <i class="fas fa-plus"></i> Add another row
+                </div>
+
+                <hr />
 
                 <div class="form-check">
                     <input class="form-check-input" type="checkbox" value="1" name="agree_terms" id="agree_terms" required>
@@ -248,4 +268,6 @@
         </div>
 
     </form>
-</div>
+</div>
+
+<script src="static/signup.js"></script>

public/parts/template_child_entry.php

@@ -0,0 +1,71 @@
+<?php
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+// Use a random ID for each child, so we can tell 100% which inputs go together
+$randomid = mt_rand(0, 9999999999);
+?>
+
+<div class="list-group-item">
+    <input type="hidden" name="child[ids][]" value="<?php echo $randomid; ?>" />
+    <div class="row">
+        <div class="col-12 col-sm-4">
+            <div class="form-group">
+                <label>Name:</label>
+                <div class="input-group">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-user-graduate"></i></span>
+                    </div>
+                    <input type="text" name="child[name][<?php echo $randomid; ?>]" class="form-control" />
+                </div>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-3">
+            <div class="form-group">
+                <label>Birth month:</label>
+                <div class="input-group">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-calendar"></i></span>
+                    </div>
+                    <select name="child[month][<?php echo $randomid; ?>]" class="form-control">
+                        <option value=1>January</option>
+                        <option value=2>February</option>
+                        <option value=3>March</option>
+                        <option value=4>April</option>
+                        <option value=5>May</option>
+                        <option value=6>June</option>
+                        <option value=7>July</option>
+                        <option value=8>August</option>
+                        <option value=9>September</option>
+                        <option value=10>October</option>
+                        <option value=11>November</option>
+                        <option value=12>December</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-3">
+            <div class="form-group">
+                <label>Birth year:</label>
+                <div class="input-group">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
+                    </div>
+                    <input type="number" name="child[year][<?php echo $randomid; ?>]" class="form-control" min="1980" max="<?php echo date('Y'); ?>" value="<?php echo date('Y', strtotime('now - 10 years')); ?>"/>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-2">
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" value="1" name="child[graduate][<?php echo $randomid; ?>]">
+                <label class="form-check-label">Graduated</label>
+            </div>
+        </div>
+    </div>
+</div>

public/static/signup.js

@@ -0,0 +1,12 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+
+$("#add_child_row").click(function () {
+    $.get("parts/template_child_entry.php", {}, function (resp) {
+       $("#child_list").append(resp);
+    });
+});