Using Jquery to cycle through input fields when MaxLength is reached

Question

I have found several suggested solutions for this but none seems to work with my situation due to all my inputs being nested inside div tags. Below is a sample row. I have several of these rows on a data entry form. I'm looking to advance to the next input field when the maxlength of 7 is entered into any input. The user will enter xxx.xxx where x is any number in any or all of the inputs fields. I'm trying to make it so they don't have to leave the numeric keypad. Any help would be appreciated.

this is my attempt jsfiddle

<div class="form-group row">
   <div class="col-md-2 text-center">
      <span><label class="control-label">2.5</label></span>
      <input data-val="true" data-val-number="The field CouponTypeID must be a number." data-val-required="The CouponTypeID field is required." id="DailyTradeData_Coupons_0__CouponTypeID" name="DailyTradeData.Coupons[0].CouponTypeID" type="hidden" value="4">
   </div>
   <div class="col-md-3 border-div col-main">
      <div class="row">
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field OpenAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_0__OpenAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[0].OpenAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field Close Amount must be a number." id="DailyTradeData_Coupons_0__CouponValues_0__CloseAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[0].CloseAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field HighAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_0__HighAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[0].HighAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field LowAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_0__LowAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[0].LowAmount" type="text" value="">
         </div>
      </div>
      <input data-val="true" data-val-number="The field SettlementMonthID must be a number." data-val-required="The SettlementMonthID field is required." id="DailyTradeData_Coupons_0__CouponValues_0__SettlementMonthID" name="DailyTradeData.Coupons[0].CouponValues[0].SettlementMonthID" type="hidden" value="67">
   </div>
   <div class="col-md-3 border-div col-main">
      <div class="row">
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field OpenAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_1__OpenAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[1].OpenAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field Close Amount must be a number." id="DailyTradeData_Coupons_0__CouponValues_1__CloseAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[1].CloseAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field HighAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_1__HighAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[1].HighAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field LowAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_1__LowAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[1].LowAmount" type="text" value="">
         </div>
      </div>
      <input data-val="true" data-val-number="The field SettlementMonthID must be a number." data-val-required="The SettlementMonthID field is required." id="DailyTradeData_Coupons_0__CouponValues_1__SettlementMonthID" name="DailyTradeData.Coupons[0].CouponValues[1].SettlementMonthID" type="hidden" value="68">
   </div>
   <div class="col-md-3 border-div col-main">
      <div class="row">
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field OpenAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_2__OpenAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[2].OpenAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field Close Amount must be a number." id="DailyTradeData_Coupons_0__CouponValues_2__CloseAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[2].CloseAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field HighAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_2__HighAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[2].HighAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field LowAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_2__LowAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[2].LowAmount" type="text" value="">
         </div>
      </div>
      <input data-val="true" data-val-number="The field SettlementMonthID must be a number." data-val-required="The SettlementMonthID field is required." id="DailyTradeData_Coupons_0__CouponValues_2__SettlementMonthID" name="DailyTradeData.Coupons[0].CouponValues[2].SettlementMonthID" type="hidden" value="69">
   </div>
</div>

Answer 1

You have hidden inputs in the form that are being selected when using $('input'). You need to select all the non hidden inputs $('input').not(':hidden') and if your form has input types other than text (radio, checkbox...etc) then your selection shall be $('input[type="text"]') (this also works for the current case).

Besides, when the index of the element + 1 reaches the length of the inputs then set the next element index as 0 to keep the cycle :

((inputs.index($(this)) + 1) == inputs.length) ? 0 : inputs.index($(this)) + 1;

Snippet:

var inputs = $('input').not(':hidden').on('keydown', function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == 13){
        //Enter
      
        var next  = ((inputs.index($(this)) + 1) == inputs.length) ? 0 : inputs.index($(this)) + 1;
        inputs.eq(next).focus();
    }
    
    //event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row">
   <div class="col-md-2 text-center">
      <span><label class="control-label">2.5</label></span>
      <input data-val="true" data-val-number="The field CouponTypeID must be a number." data-val-required="The CouponTypeID field is required." id="DailyTradeData_Coupons_0__CouponTypeID" name="DailyTradeData.Coupons[0].CouponTypeID" type="hidden" value="4">
   </div>
   <div class="col-md-3 border-div col-main">
      <div class="row">
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field OpenAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_0__OpenAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[0].OpenAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field Close Amount must be a number." id="DailyTradeData_Coupons_0__CouponValues_0__CloseAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[0].CloseAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field HighAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_0__HighAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[0].HighAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field LowAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_0__LowAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[0].LowAmount" type="text" value="">
         </div>
      </div>
      <input data-val="true" data-val-number="The field SettlementMonthID must be a number." data-val-required="The SettlementMonthID field is required." id="DailyTradeData_Coupons_0__CouponValues_0__SettlementMonthID" name="DailyTradeData.Coupons[0].CouponValues[0].SettlementMonthID" type="hidden" value="67">
   </div>
   <div class="col-md-3 border-div col-main">
      <div class="row">
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field OpenAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_1__OpenAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[1].OpenAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field Close Amount must be a number." id="DailyTradeData_Coupons_0__CouponValues_1__CloseAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[1].CloseAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field HighAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_1__HighAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[1].HighAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field LowAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_1__LowAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[1].LowAmount" type="text" value="">
         </div>
      </div>
      <input data-val="true" data-val-number="The field SettlementMonthID must be a number." data-val-required="The SettlementMonthID field is required." id="DailyTradeData_Coupons_0__CouponValues_1__SettlementMonthID" name="DailyTradeData.Coupons[0].CouponValues[1].SettlementMonthID" type="hidden" value="68">
   </div>
   <div class="col-md-3 border-div col-main">
      <div class="row">
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field OpenAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_2__OpenAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[2].OpenAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field Close Amount must be a number." id="DailyTradeData_Coupons_0__CouponValues_2__CloseAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[2].CloseAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field HighAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_2__HighAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[2].HighAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field LowAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_2__LowAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[2].LowAmount" type="text" value="">
         </div>
      </div>
      <input data-val="true" data-val-number="The field SettlementMonthID must be a number." data-val-required="The SettlementMonthID field is required." id="DailyTradeData_Coupons_0__CouponValues_2__SettlementMonthID" name="DailyTradeData.Coupons[0].CouponValues[2].SettlementMonthID" type="hidden" value="69">
   </div>
</div>

Answer 2

Get total length of input textbox and check if it's last textbox with use of index then get the focus to first textbox.

$(document).ready(function(e) {
	var inputs = $('input').on('keydown', function(event){
		var total = inputs.length;
		var inds = inputs.index(this);;
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == 13){
        //Enter
		if(inds < total-1){
        inputs.eq(inputs.index(this) + 1).focus();
		}
		else if(inds == total-1){
		 inputs.eq(total - inputs.index(this) -1).focus();
		}
    } 
    
    event.preventDefault();
});
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
<div class="row" style="padding-bottom: 3px">
    <div class="col-xs-1" style="padding-right: 2px; padding-left: 0px">1</div>
     <div class="clearfix"></div>
    <div class="col-xs-2" style="padding-right: 2px; padding-left: 1px">
        <input type="text" class="form-control text-center" maxlength="4" name="a[]">
    </div>
    <div class="clearfix"></div>
    <div class="col-xs-2" style="padding-right: 2px; padding-left: 1px">
        <input type="text" class="form-control text-center" maxlength="5" name="b[]">
    </div>
     <div class="clearfix"></div>
    <div class="col-xs-2" style="padding-right: 2px; padding-left: 1px">
        <input type="text" class="form-control text-center" maxlength="5" name="c[]">
    </div>
</div>
<div class="row" style="padding-bottom: 3px">
    <div class="col-xs-1" style="padding-right: 2px; padding-left: 0px">2</div>
     <div class="clearfix"></div>
    <div class="col-xs-2" style="padding-right: 2px; padding-left: 1px">
        <input type="text" class="form-control text-center" maxlength="4" name="a[]">
    </div>
     <div class="clearfix"></div>
    <div class="col-xs-2" style="padding-right: 2px; padding-left: 1px">
        <input type="text" class="form-control text-center" maxlength="5" name="b[]">
    </div>
     <div class="clearfix"></div>
    <div class="col-xs-2" style="padding-right: 2px; padding-left: 1px">
        <input type="text" class="form-control text-center" maxlength="5" name="c[]">
    </div>
</div>
</div>