php jquery repeat form with javascript datepicker

Question

i used this script to create a repeat form

http://demo.techstream.org/Dynamic-Form-Processing-with-PHP/

in my form i use a javascript for datepicker this code work for the first row but when not whorking in the second row and the same problem for duration difference between 2 date and for my progress bar. All this work in the first row when i add a second row the datepicker and duration and progress bar stop working but work in the first

html code:

  <td>
    <input id="startdate" name="startdate[]" type="date" placeholder="planing Date"  onfocus="(this.type='date')" onblur="(this.type='text')" onChange="onDateChange()" onchange="cal()">
                             </td>
                             <td>
    <input id="enddate" name="enddate[]" type="text" placeholder="planing Date"  onfocus="(this.type='date')" onblur="(this.type='text')" onchange="cal()">
                             </td>
                             <td>
   <input id="duration" name="duration[]" type="text" placeholder="Duration" onChange="onDateChange()">
                             </td>
                             <td> <td>
<input id="prb" name="txt_prb[]" type="text" placeholder="%">
                            <div id="bar"><span id="progresss"></span></div>
                     </td>

javascript code:

   <script type="text/javascript">
            function GetDays(){
                    var dropdt = new Date(document.getElementById("enddate").value);
                    var pickdt = new Date(document.getElementById("startdate").value);
                    return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
            }

            function cal(){
            if(document.getElementById("startdate")){
                document.getElementById("duration").value=GetDays();
            }  
        }

        </script>

      <script>
    $(document).on('click', ':not(form)[data-confirm]', function(e){
        if(!confirm($(this).data('confirm'))){
          e.stopImmediatePropagation();
          e.preventDefault();
            }
    });

    $(document).on('submit', 'form[data-confirm]', function(e){
        if(!confirm($(this).data('confirm'))){
            e.stopImmediatePropagation();
          e.preventDefault();
            }
    });

    $(document).on('input', 'select', function(e){
        var msg = $(this).children('option:selected').data('confirm');
        if(msg != undefined && !confirm(msg)){
            $(this)[0].selectedIndex = 0;
        }
    });
    </script>
       <script>
$(document).on('click', ':not(form)[data-confirm]', function(e){
    if(!confirm($(this).data('confirm'))){
      e.stopImmediatePropagation();
      e.preventDefault();
        }
});

$(document).on('submit', 'form[data-confirm]', function(e){
    if(!confirm($(this).data('confirm'))){
        e.stopImmediatePropagation();
      e.preventDefault();
        }
});

$(document).on('input', 'select', function(e){
    var msg = $(this).children('option:selected').data('confirm');
    if(msg != undefined && !confirm(msg)){
        $(this)[0].selectedIndex = 0;
    }
});
</script>

Answer 1

Use classes instead of id if you are planning to duplicate the html, so:

<td>
    <input class="startdate" name="startdate[]" type="date" placeholder="planing Date"  onfocus="(this.type='date')" onblur="(this.type='text')" onChange="onDateChange()" onchange="cal()">
</td>
<td>
    <input class="enddate" name="enddate[]" type="text" placeholder="planing Date"  onfocus="(this.type='date')" onblur="(this.type='text')" onchange="cal()">
</td>
<td>
    <input class="duration" name="duration[]" type="text" placeholder="Duration" onChange="onDateChange()">
</td>
<td> 
    <input class="prb" name="txt_prb[]" type="text" placeholder="%">
    <div class="bar"><span class="progresss"></span></div>
</td>

And adapt your javascript functions using document.getElementByClassName() instead of document.getElementById()

or

pass the element reference in your function calls like onChange="cal(this)" it solves the issue in this post: Pass parameters throw onchange function