Creating and validating a tiered pricing form

I am trying to create a tiered pricing form that would allow us to change the price depending on how much the customer is using.

I have created a form where we can add and remove tiers, but I want to be able to validate this, so the first option should always start with 0, there should be no max on the last tier, there should be no overlap, and there should be no gaps between the tiers.

For example: 0-5, 6-10, 11-15, 15-20, 21+

Instead of: 2-5, 7-11, 10-12, 13-19, 20+

function update_max(){
  var pricing_tiers = document.getElementsByClassName("batch_pricing_tier");
  for(var i=0; i<pricing_tiers.length; i++){
    if(i!=0){
      var previous_tier = pricing_tiers.item(i-1);
      var previous_cols = previous_tier.children;
      var previous_max = parseInt(previous_cols[0].children[0].children[1].value);
    }else{
      var previous_max = -1;
    }
    var pricing_tier = pricing_tiers.item(i);
    var pricing_cols = pricing_tier.children;
    var minimum = parseInt(pricing_cols[0].children[0].children[1].value);
    var maximum = parseInt(pricing_cols[1].children[0].children[1].value);
    if(minimum <= previous_max){
      var new_min = previous_max+2;
      pricing_cols[0].children[0].children[1].value = new_min;
      minimum = new_min;
    }
    if(maximum <= minimum){
      var new_max = minimum+1;
      pricing_cols[1].children[0].children[1].value = new_max;
    }
  }
}
$(".batch_add").click(function(){
  $("#batch_form > div > div:first-child").clone(true).insertBefore("#batch_form > div > div:last-child");
  update_max();
});
$(".batch_remove").click(function(){
  $(this).parent().parent().remove();
  update_max();
});
$(".max_update").change(function(){
  update_max();
});
$("#batch_pricing_submit").click(function(){
  var pricing_array = [];
  var pricing_tiers = document.getElementsByClassName("batch_pricing_tier");
  for(var i=0; i<pricing_tiers.length; i++){
    pricing_array[i] = {};
    var pricing_tier = pricing_tiers.item(i);
    var pricing_cols = pricing_tier.children;
    var minimum = pricing_cols[0].children[0].children[1].value;
    var maximum = pricing_cols[1].children[0].children[1].value;
    var price = pricing_cols[2].children[0].children[1].value;
    pricing_array[i]['minimum'] = minimum;
    pricing_array[i]['maximum'] = maximum;
    pricing_array[i]['price'] = price;
  }
  console.log(pricing_array);
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form class="form m-3" id="batch_form" method="POST">
  <div>
    <div class="row batch_pricing_tier">
      <div class="col">
        <div class="form-group">
          <label for="minimum">Minimum</label>
          <input class="form-control" type="text" value="0" required disabled>
        </div>
      </div>
      <div class="col">
        <div class="form-group">
          <label for="maximum">Maximum</label>
          <input class="form-control max_update" type="text" value="1" required>
        </div>
      </div>
      <div class="col">
        <div class="form-group">
          <label for="price">Price</label>
          <input class="form-control" type="text" placeholder="Price" name="price" id="price" required>
        </div>
      </div>
      <div class="col">
        <br /><span class="batch_remove float-right">Remove</span>
      </div>
    </div>
    <div class="row batch_pricing_tier">
      <div class="col">
        <div class="form-group">
          <label for="minimum">Minimum</label>
          <input class="form-control" type="text" value="2" required disabled>
        </div>
      </div>
      <div class="col">
        <div class="form-group">
          <label for="maximum">Maximum</label>
          <input class="form-control max_update" type="text" value="inf" required disabled>
        </div>
      </div>
      <div class="col">
        <div class="form-group">
          <label for="price">Price</label>
          <input class="form-control" type="text" placeholder="Price" name="price" id="price" required>
        </div>
      </div>
      <div class="col">
        <br /><span class="batch_remove float-right">Remove</span>
      </div>
    </div>
  </div>
  <span class="d-block w-100 align-center">
    <span class="batch_add float-right">Add fields</span>
    <br />
    <button class="btn btn-success" type="button" id="batch_pricing_submit" onclick="return false;">Add Batch Pricing</button>
  </span>
</form>

//-----EDIT-----//

This is for a usage based pricing model. So the price should get cheaper the more a customer uses. For example: $10/unit for 0 to 5 units. $9/unit for 6 to 10 units. $8/unit for 11 to 15 units. So if a user uses 8 units in a billing period they would be charged $9 x 8 units which would total $72.

Each product is different so will have different tiers of different unit amounts so I need to validate this. I need the first tier minimum to start at 0. The maximum of any tier should be larger than the minimum. The minimum of the next tier should be larger than the maximum of the previous. There should be no gaps between tiers. There should be no overlap between tiers.

from Creating and validating a tiered pricing form