Show the data on Prev Next button in each table row

Question

I am having table with multiple rows. Each row is having Prev and Next Button.

Right now, it shows the data on clicking of Prev/Next. However, problem is if I click on row2's next button and then click on row1's prev button then it takes incremetal count from row2's next button. It should start from zero again.

  var exampleDataCount = 0; $(document).on('change', '.js-column', function() { exampleDataCount = 0; var $target = $(this).parent().next().next(); var value = '<a href="javascript:void(0)" class="prev_example" data="'+$(this).val()+'"><<</a> '+data[0][$(this).val()]+' <a href="javascript:void(0)" class="next_example" data="'+$(this).val()+'">>></a>'; $target.html(value); }); $(document).on('click', '.prev_example', function() { if( exampleDataCount != 0 ) exampleDataCount--; var $target = $(this).parent(); var field = $(this).parent().prev().prev().children('select.js-column'); var value = '<a href="javascript:void(0)" class="prev_example" data="'+$(this).attr('data')+'"><<</a> '+data[exampleDataCount][field.val()]+' <a href="javascript:void(0)" class="next_example" data="'+$(this).attr('data')+'">>></a>'; $target.html(value); }); $(document).on('click', '.next_example', function() { $('#example_column_heading').val($(this).attr('data')); if( exampleDataCount != data.length ) exampleDataCount++; var $target = $(this).parent(); var field = $(this).parent().prev().prev().children('select.js-column'); var value = '<a href="javascript:void(0)" class="prev_example" data="'+$(this).attr('data')+'"><<</a> '+data[exampleDataCount][field.val()]+' <a href="javascript:void(0)" class="next_example" data="'+$(this).attr('data')+'">>></a>'; $target.html(value); }); 

 <tr> <td> <select class="js-column" name="columns[source][]"> <option value="showstart">showstart</option><option value="showend">showend</option><option value="remedyid">remedyid</option><option value="remedycategory">remedycategory</option><option value="entrytype">entrytype</option><option value="iref" selected="selected">iref</option><option value="ref">ref</option><option value="customer">customer</option><option value="raised">raised</option><option value="priority">priority</option><option value="status">status</option><option value="statusreason">statusreason</option><option value="breachreason">breachreason</option><option </select> </td> <td> <input class="js-mapped-column" name="columns[name][]" type="text" value=""> </td> <td> <a href="javascript:void(0)" class="prev_example" data="iref">&lt;&lt;</a> <a href="javascript:void(0)" class="next_example" data="iref">&gt;&gt;</a> </td> </tr> 

Answer 1

It is because you are only making exampleDataCount = 0; only when drop-down changes otherwise it will increment or decrements from the previous value exampleDataCount variable has.