How to get values from timepicker fields against the click?

Question

I have dynamically created multiple tr with timepicker. I am using wickedpicker.min.js. I want to get the values of respective timepicker value against the anchor tag click ie submit click.

<tr>
<td id="output"></td>
<td>1001</td>
<td class="mdl-data-table__cell--non-numeric">Name</td>
<td class="mdl-data-table__cell--non-numeric">Disposal</td>
<td class="mdl-data-table__cell--non-numeric">
<input type="text" id="timepicker-24-hr" name="timepicker-24-hr" class="timepicker-24-hr mdl-textfield__input sstart">
</td>
<td class="mdl-data-table__cell--non-numeric">
<input type="text" id="timepicker-24-hr" name="timepicker-24-hr" class="timepicker-24-hr mdl-textfield__input eend">
</td>
<td class="mdl-data-table__cell--non-numeric">
<a href="#" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent btn-sm setAttn">submit</a>
</td>
</tr>

I am using this to get the values:

$(document).on("click", ".setAttn", function(e){
e.preventDefault();
alert($(".sstart").val());
alert($(".eend").val());
});

Answer 1

Try this code in this code I've used jquery and loops through all the input type=text tags and it will read all the values till the set tag type ends in the HTML page.

 $(document).on("click", ".setAttn", function(e) { e.preventDefault(); $(".sstart").each(function() { alert($(this).val()); }) $(".eend").each(function() { alert($(this).val()); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <tr> <td id="output"></td> <td>1001</td> <td class="mdl-data-table__cell--non-numeric">Name</td> <td class="mdl-data-table__cell--non-numeric">Disposal</td> <td class="mdl-data-table__cell--non-numeric"> <input type="text" id="timepicker-24-hr" name="timepicker-24-hr" class="timepicker-24-hr mdl-textfield__input sstart"> </td> <td class="mdl-data-table__cell--non-numeric"> <input type="text" id="timepicker-24-hr" name="timepicker-24-hr" class="timepicker-24-hr mdl-textfield__input eend"> </td> <td class="mdl-data-table__cell--non-numeric"> <input type="text" id="timepicker-24-hr" name="timepicker-24-hr" class="timepicker-24-hr mdl-textfield__input sstart"> </td> <td class="mdl-data-table__cell--non-numeric"> <input type="text" id="timepicker-24-hr" name="timepicker-24-hr" class="timepicker-24-hr mdl-textfield__input eend"> </td> <td class="mdl-data-table__cell--non-numeric"> <a href="#" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent btn-sm setAttn">submit</a> </td> </tr> 

Here's the jsFiddle

Answer 2

Finally I found out the answer. I binded the ids of the data with the timepicker ids so every timepicker ids are different now. So, i just get the values from the timepicker ids.