weird problem with the datepicker

weird problem with the datepicker

Hi

I hope I'm in the correct place and someone can help me out.

I have a form on my website where people can sign up. The form has a button so that when the button is clicked, another form is added on the page, so people can add as many forms as they want.

At first, the datepicker gave me issues, but that problem was finally resolved. Now I run into the following issue and I have no idea how to fix it or what's causing it:

*  if someone clicks the datepicker field on a single form, it all works fine
*  if someone fills in the first form with the datepicker included, and then adds another signup form, the datepicker field on this second form does not work at all.
*  if someone first creates as many forms as he wants, and then starts filling them in, all the datepicker fields work as they should.

my datepicker code:
  1. <script type="text/javascript">
      $(function() {
        $(document).on('focus','.datepicker', function(){
          $(this).datepicker({
            monthNames: [ "januari", "februari", "maart", "april", "mei", "juni", "juli", "augustus", "september", "oktober", "november", "december" ],
            monthNamesShort: ['januari','februari','maart','april','mei','juni', 'juli','augustus','september','oktober','november','december'],
            changeMonth: true,
            changeYear: true,
            dateFormat: "d MM yy",
            minDate: -36500,
            maxDate: -730,
            yearRange: "1900:2100",
            showAnim: "fold"
          });
        });
      });
Code to dynamically add forms:

  1. <script type="text/javascript">
      var group_count = 0;

      function add_form_group() {
        var cloned_group = document.getElementsByClassName('copy-row');
        for (var i = 0; i < cloned_group.length; i++) {
          var single_element = cloned_group[i].cloneNode(true);
          var inputs = single_element.getElementsByTagName("input");
          for (var ii = 0; ii < inputs.length; ii++) {
            if(inputs[ii].type !== 'radio'){
              inputs[ii].value = "";
            }
            inputs[ii].name = inputs[ii].name.replace(/\d+/, group_count+1);
            if(inputs[ii].name !== 'datepicker'){
              inputs[ii].id = inputs[ii].id.replace(/\d+/, group_count+1);
            }
          }
          var selects = single_element.getElementsByTagName("select");
          for (var ii = 0; ii < selects.length; ii++) {
            selects[ii].name = selects[ii].name.replace(/\d+/, group_count+1);
          }
          single_element.className = 'new-row-'+group_count;
          document.querySelector('#copy_group_holder').insertBefore(single_element, document.querySelector('#footer_row'));
        }
        var remove_button_row = document.createElement("tr");
        document.querySelector('#copy_group_holder').insertBefore(remove_button_row, document.querySelector('#footer_row'));
        remove_button_row.className = 'new-row-'+group_count;
        remove_button_row.innerHTML = '<button onclick="remove_group(' + group_count + ');" title="Remove Group">deelnemer verwijderen</button>';
        group_count++;
      }

      function remove_group(group_num) {
        var new_groups = document.getElementsByClassName('new-row-'+group_num);
        for (var i = new_groups.length-1; i >= 0; i--) {
          new_groups[i].remove();
        }
      }

      function toggleContent() {
        var contentId = document.getElementById("content");
        contentId.style.display == "block" ? contentId.style.display = "none" :
        contentId.style.display = "block";
      }
      var group_count = 0;
    </script>
Form code:

  1. echo "\n<p><form method=\"POST\" action=\"".$_SERVER['PHP_SELF']."\">";
    echo "\n<table width=\"700\" border=\"0\">";
    echo "\n<tbody id=\"copy_group_holder\">";
    echo "\n<tr class=\"copy-row\"><td width=\"200\" height=\"25\">voornaam *</td>                  <td width=\"500\"><input type=\"text\" name=\"vnaam[0]\" size=\"35\"></td></tr>";
    echo "\n<tr class=\"copy-row\"><td width=\"200\" height=\"25\">tussenvoegsel</td>               <td width=\"500\"><input type=\"text\" name=\"tussv[0]\" size=\"35\"></td></tr>";
    echo "\n<tr class=\"copy-row\"><td width=\"200\" height=\"25\">achternaam *</td>                <td width=\"500\"><input type=\"text\" name=\"anaam[0]\" size=\"35\"></td></tr>";
    echo "\n<tr class=\"copy-row\"><td width=\"200\" height=\"25\">geslacht *</td>                  <td width=\"500\"><input type=\"radio\" name=\"geslt[0]\" value=\"M\"> jongen &nbsp; &nbsp; &nbsp; <input type=\"radio\" name=\"geslt[0]\" value=\"V\"> meisje </td></tr>";
    echo "\n<tr class=\"copy-row\"><td width=\"200\" height=\"25\">geboortedatum *</ td>            <td width=\"500\"><input type=\"text\" id=\"dp[0]\" class=\"datepicker\" name=\"gebdt[0]\" style=\"background:white\" size=\"35\" readonly=\"readonly\"></td></tr>";
    echo "\n<tr class=\"copy-row\"><td width=\"200\"><br><button onclick=\"add_form_group()\" type=\"button\">deelnemer toevoegen</button></td><td width=\"500\" valign=\"top\">&nbsp;</td></tr >";
    echo "\n</tbody>";
    echo "\n</table>";
    echo "\n</form>";


Or if you'd rather see the code in situ:
http://www.sluizenloop.nl/patricktest.php

Has anyone seen this problem before or is there actually an error in the code?