Q:

HTML 2 areas with the same content

I am trying to do a date picker based on Groovy/Grails. I am not very familiar with HTML, but I managed to do a select area which makes a calendar appear when the user clicks on it and then the date is properly picked and saved in the database. But I want to make another one, to use it as an end date. I tried many things but I didn't managed to do it. Can anyone help? This is the code so far:
<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <title>WannabeDoodle</title>

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    <script>
        $(document).ready(function() {
        $("#datepicker").datepicker();
        });
    </script>

</head>
<body>

    <center><h1><b>Schedule an event</b></h1></center>
    <br>
    <center><font color="#2977C1">1. Generals ></font> <b>2. Set the date ></b> 3. Invite</center>
    <br>

    <g:form controller="SetDate" action="next">

        <div class="fieldcontain">

            &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
            <form>
                <label for="startDate">Select date</label>
                <g:textField name="startDate" id="datepicker" value="${startDate}"/>
            </form>
            <br><br>

            <center>
            <a href="http://localhost:8080/Groodle/CreateGenerals"><font color=#2875bd>Back</font></a>
            &emsp;
            <g:actionSubmit class="buttons" value="Next"/>
            </center>

        </div>
    </g:form>

</body>
</html>

A:

I fixed it. I made a second datepicker id named datepicker2 in the script and I used it on the end date.
<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <title>WannabeGroodle</title>

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    <script>
        $(document).ready(function() {
        $("#datepicker").datepicker();
        $("#datepicker2").datepicker();
        });
    </script>

</head>
<body>

    <center><h1><b>Schedule an event</b></h1></center>
    <br>
    <center><font color="#2977C1">1. Generals ></font> <b>2. Set the date ></b> 3. Invite</center>
    <br>

    <g:form controller="SetDate" action="next">

        <div class="fieldcontain">

            <form>
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                <label for="startDate">Select date</label>
                <g:textField name="startDate" id="datepicker" value="${startDate}"/>    
                <br><br>

                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                <label for="endDate">Select end date</label>
                <g:textField name="endDate" id="datepicker2" value="${endDate}"/>               
            </form>
            <br><br><br>

            <center>
            <a href="http://localhost:8080/Groodle/CreateGenerals"><font color=#2875bd>Back</font></a>
            &emsp;
            <g:actionSubmit class="buttons" value="Next"/>
            </center>

        </div>
    </g:form>

</body>
</html>

