JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dt_distance_slab">
     <input type="text" class ="number" name="distanceSlabCost1" id = "distanceSlabCost1"  value=""/> 
  </div>
<div class="dt_distance_slab">
      <input type="text"  class ="number distanceSlab2" name="distanceSlabCost2" id = "distanceSlabCost2"  value=""/> 
  </div>
  <div class="dt_distance_slab">
      <input type="text"  class ="number distanceSlab3" name="distanceSlabCost3" id = "distanceSlabCost3"  value=""/> 
  </div>
   <div class="dt_distance_slab">
      <input type="text"  class ="number distanceSlab4" name="distanceSlabCost4" id = "distanceSlabCost4"  value=""/> 
  </div>
    <div class="dt_distance_slab">
      <input type="text"  class ="number distanceSlab5" name="distanceSlabCost5" id = "distanceSlabCost5"  value=""/> 
  </div>

<input type="button" value="Submit" id="btnSubmit" />

JavaScript

$(document).ready(function(){
    $("#btnSubmit").click(function(){
        //alert( $(":text[class^='number']").length);
        var blnIsValid = true;
        $(":text[class^='number']").each(function(i){
            if(i > 0) {
                var curTxtBox = $(this);
                var prevTxtBox =  $(":text[class^='number']:eq("+ (i-1) +")");
                if($.trim(curTxtBox.val()) != "" && $.trim(prevTxtBox.val()) == "") {
                    alert("Enter value for previous distance");
                    blnIsValid = false;
                    return false;
                }
            }
        }); 
        return blnIsValid;
    });
});