Q: jquery each loop through all the element after the clicked element this is the razor code of the elements that will be generated
    @{  k = 0; }; 
    @foreach (var item in Model.Where(q=>q.isOrginal==true))
    {          
        <tr>
            <td>Starting Time</td>
            <td>                    
                @Html.Hidden("[" + i + "].isOrginal", true)
                @Html.DropDownList("[" + i + "].StartingTime", new SelectList(ViewBag.StartingTime, "Value", "Text", item.StartingTime.ToString()), new { @class = "no-select dropdown", data_id= @k,id="starting-true" + @k, data_val="true" })               
            </td>
            <td>Ending Time</td>
            <td>                 
                @Html.DropDownList("[" + i + "].EndingTime", new SelectList(ViewBag.EndingTime, "Value", "Text", item.EndingTime.ToString()), new { @class = "no-select dropdown", data_id = @k,id = "ending-true" + @k, data_val = "true" })                 
            </td>
            <td>Charges</td>
            <td>                
                @Html.TextBox("[" + i + "].Charges", item.Charges, new { @class = "original", data_id = @k, id = "original-false" + @k })
            </td>
        </tr>
        i++;
        k++;
    }

this is the jquery code so far
$(document).on('change', '.dropdown', function (e)
{         

                $('.dropdown').each(function (i, obj) {

                    var ii = $(obj).attr("data-val");
                    if (ii == "true") {
                        console.log(ii);
                    }

                });  
}); 

suppose there are 8 dropdown generated on the page
st     en
st     en
st     en 
st     en

whichever dropdown i onchanges i want to start loop from the next dropdown to the last. if it is the last i don't want to loop through anything. how can i achieve this?

A: Try below code (not tested as per your scenario but should work)
$(".dropdown").on("change",function(e){ 
  var nextdps = $(this).nextAll(".dropdown");
  if(!nextdps){
   nextdps = [];
  }

  var nextTrs = $(this).parents("tr").nextAll("tr");

  $.each(nextTrs,function(i,elm){
        var trDps= $(elm).find(".dropdown"); 
      if(trDps){
      nextdps.push(trDps);
      }
  });


   $.each(nextdps,function(i,elm){
        var ii = $(elm).attr("data-val");
      if (ii == "true") {
        console.log(ii);
      }  
  })
});


A: You can do this way. I changed change event to click so you can click on any word and see the following highlighted in red.
This way you can have dropdowns anywhere in your code, as long as the have their id set.


var id;

$(document).on('click', '.dropdown', function(e)
{ 
  id = $(this).attr('id').split('dropdown').pop();
  id = parseInt( id );
  $('.dropdown').removeClass('red');
  $('.dropdown').each( check );
});


function check( index ) 
{
  if ( id == $('.dropdown').length -1 ) { return }
  if ( index <= id ) { return }
  $('.dropdown').get(index).classList.add('red');
  // Do whatever you want here with `index`
}
.red {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown" id="dropdown0">Zero</div>
<div class="dropdown" id="dropdown1">One</div>
<div class="dropdown" id="dropdown2">Two</div>
<div class="dropdown" id="dropdown3">Three</div>
<div class="dropdown" id="dropdown4">Four</div>


