Question

My problem is quite simple but I can’t resolve it.I’m trying to populate a form via a js function . Here is my form (for each date, the user can enter what he did on that day (action) and the time spent on this action(NbHour)):

<div id="hoursDetails" class="toogle_form" style="display:none">
      <table border=0>
          <?php for ($i=0 ; $i<3; $i++){
        echo '<tr>
                  <td><div id="date'.$i.'" ></td>   
               <td><input type=text name="action'.$i.'"  placeholder="Votre action">
               <input type="text" name="Nbhour'.$i.'"  placeholder="nombre heures">
               </td>
            </tr>
       </table> ' ;}
        ?>

The problem occurs when I try to populate this form . Here is how I do in the js function :

$('#date0').html('monday');
$('#date1').html('tuesday');
$('#date2').html('wednesday');

Strangely, this shows only monday with the two inputs : action and number of hours.
For the second row, it prints only tuesday. And the third row doesn’t exist.
What I am doing wrong ? Thank you for your help

Answer 1

Your markup is invalid, looping with closing the table (</table>) in each iteration will break the markup.

move </table> out of the loop and close the hoursDetails <div>

<div id="hoursDetails" class="toogle_form" style="display:none">
<table border=0>
<?php for ($i=0 ; $i<3; $i++){
    echo '<tr>
        <td><div id="date'.$i.'" ></div></td>   
        <td>
            <input type=text name="action'.$i.'"  placeholder="Votre action">
            <input type="text" name="Nbhour'.$i.'"  placeholder="nombre heures">
        </td>
    </tr>' ;}
?>
</table>
</div>