Clone in javascript via mysqli-php select

Question

I am into developing this select where I can clone using javascript.

But before hand, I have this script to select the options.

 <script type="text/javascript">
            $(document).ready(function () {
                $('select').on('change', function (e) {
                    var selected_value = $(this).val();
                    var option_data = $(this).children('option[value="' + selected_value + '"]');

                    // get data values
                    var visanumber = option_data.data('visanumber');
                    var idnumber = option_data.data('idnumber');
                    var tesdaNumber = option_data.data('tesdanumber');
                    var subdate = option_data.data('subdate');

                    // the photo
                    var accntVisaPhotoPath = option_data.data('accntvisaphotopath');

                    $(this).closest('td').siblings().find('img.accntVisaPhotoPath').attr('src', accntVisaPhotoPath);

                    var passportPath = option_data.data('passportpath');
                    $(this).closest('td').siblings().find('img.passportPath').attr('src', passportPath);

                    // set the values
                    $(this).closest('td').siblings().find('span.visanumber').text(visanumber);
                    $(this).closest('td').siblings().find('span.idnumber').text(idnumber);
                    $(this).closest('td').siblings().find('span.tesdaNumber').text(tesdaNumber);
                    $(this).closest('td').siblings().find('span.subdate').text(subdate);
                });
            });
</script>

the above script is functioning well and I have decided to use another javascript to clone the SELECT in order for use up to 10 SELECT. Without it, it's too crumble some to add 10 SELECT.

<script type="text/javascript">
            var regex = /^(.+?)(\d+)$/i;
            var cloneIndex = $(".clonedInput").length;

            function clone(){
                $(this).parents(".clonedInput").clone()
                    .appendTo("body")
                    .attr("id", "clonedInput" +  cloneIndex)
                    .find("*")
                    .each(function() {
                        var id = this.id || "";
                        var match = id.match(regex) || [];
                        if (match.length == 3) {
                            this.id = match[1] + (cloneIndex);
                        }
                    })
                    .on('click', 'button.clone', clone)
                    .on('click', 'button.remove', remove);
                cloneIndex++;
            }
            function remove(){
                $(this).parents(".clonedInput").remove();
            }
            $("button.clone").on("click", clone);

            $("button.remove").on("click", remove);
</script>

and by the way, the second script is not functioning after calling it in this script.

<?php
$result = mysqli_query($db, "SELECT * FROM applicant WHERE masterStat='CVF-Active' AND (tesdaNumber !='') AND (passport !='') ORDER BY appID");
                ?>
                <div align="center">
                    <form name="listUsers" method="post" action="cvsEmail.php" enctype="multipart/form-data" accept-charset="UTF-8">
                        <table border="1px" width="600">
                            <tr>
                                <th>
                                    <div align="center">&nbsp;Applicant Name&nbsp;</div>
                                </th>
                                <th>
                                    <div align="center"><font color="red">&nbsp;TESDA Number&nbsp;</font></div>
                                </th>
                                <th>
                                    <div align="center">&nbsp;Passport&nbsp;</div>
                                </th>
                            </tr>
                            <tr align="center" bgcolor="red">
                                <td colspan="3">
                                    Email:
                                    <select name="email">
                                        <option value="">Select FIRST</option>
                                        <option value="xxx@live.com.ph">Test</option>
                                        <option value="xxxs@hotmail.com">Al XXXX</option>
                                        <option value="ssgfgf@gmail.com">Al XXXXXX</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>    
                                   <div id="clonedInput1" class="clonedInput">
                                       <div>
                                        <label for="users" class="">Applicant: <span class="requiredField">*</span></label>   
                                        <select class="" name="users[]" id="users">
                                        <?php
                                        echo "<option value=\"\">Select:</option>"; 
                                         while ($row = mysqli_fetch_array($result)) {
                                        echo "<option value='" . $row['appID'] . "'  data-tesdaNumber='" . $row['tesdaNumber'] . "' data-passportPath='http://emmanuelstaffing.com/webV2/acf/" . $row['passportPath'] . "'>" . $row['fName'] . " " . $row['lName'] . "</option>";
                                        }
                                        //First var

                                        $_REQUEST['appID'];

                                        ?>
                                    </select>
                                    <div class="actions">
                                        <button class="clone">Add One</button> 
                                        <button class="remove">Remove</button>
                                    </div>
                                    </div>
                                   </div>

Any advise to have it CLONE?