Handling From and To date in jquery/javascript for dynamic loop

Question

I have a for loop that will run five times. First condition is to check whether there is from_date and to_date in it.
If yes validate the from and to date and throw error message is to date is less than the from date.

I know that i need to get the $i value of each text box and validate but with no clue.

<?php for($i=0; $i<=5; $i++) { ?>
<tr>
    <td>
        <div class="input-group date" id="from_date_<?php echo $i; ?>">
            <input class="form-control input-sm" name="from_date_<?php echo $i; ?>" type="text" value=<?php echo $from_date; ?> >
        </div>
    </td>
</tr>
<tr>
    <td>
        <div class="input-group date" id="to_date_<?php echo $i; ?>" >
            <input class="form-control input-sm" name="to_date_<?php echo $i; ?>" type="text" value="<?php echo $to_date; ?>" >
        </div>
    </td>
</tr>
<?php } ?>

Also, I have checked the stackoverflow questions but there is no validation for dynamic rows.
http://jsfiddle.net/trixta/SWQme/
How to use HTML5 to validate a date range?

Answer 1

That shouldn't be a big deal:

for (var i = 0; i < 5; i++) {
  var from = new Date(document.querySelector('[name=from_date_' + i + ']').value);
  var to = new Date(document.querySelector('[name=to_date_' + i + ']').value);
 if (from - to >= 0) {
    // bad
 }
}