strip tiered and per unit

Toggle class name on click in jQuery

by Sahil Kashyap

HTML

<div class="form-group">
                <label for="">billing_scheme:</label>
                <select name="billing_scheme" id="billing_scheme">
                    <option value="per_unit">per_unit</option>
                    <option value="tiered" id="custom_tiered">tiered</option>
                   </select>
                    <div class="tiered" style="display: none">
            
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     
                        <div class="well clearfix">
        <a class="btn btn-primary pull-right add-record" data-added="0"><i class="glyphicon glyphicon-plus"></i>&nbsp;Add Row</a>
      </div>
      <table class="table table-bordered" id="tbl_posts">
        <thead>
          <tr> <td> </td>
            <th>#</th>
            <th>FIRST UNIT</th>
            <th>LAST UNIT</th>
            <th>PER UNIT($)</th>
            <th>FLAT FEE($)</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody id="tbl_posts_body">
          <tr id="rec-1">
          <th scope="row"><span class="tiertext">FOR THE FIRST</span></th>
            <td><span class="sn">1</span>.</td>
            <td><span class="firstunit">0</span></td>
            <td><input class="up_to" name="rows[1][up_to]" type="number" min="1" max="1000" value="1" /></td>
            <td><input class="unit_amount" name="rows[1][unit_amount]" type="number" min="1" value="1" required /></td>
            <td><input class="flat_amount" name="rows[1][flat_amount]" type="number" min="0" value="1" required  /></td>
            <td></td>
          </tr>
          <tr id="rec-2">
          <th scope="row"><span class="tiertext">FOR THE NEXT</span></th>
            <td><span class="sn">2</span>.</td>
            <td><span class="firstunit">2</span></td>
            <td><input class="up_to" name="rows[2][up_to]" type="number" value="1000" max="1000"   /></td>
            <td><input...

JavaScript

$(document).on('change','#billing_scheme',function(e){
  var billing_scheme = $('#billing_scheme').val();
  // console.log('billing_scheme',billing_scheme);
  if(billing_scheme == 'tiered'){
      $("#interval_count").val(0);
      $('.tiered').css('display','block');
      $('#plan_amount_div').css('display','none');
  }
  else{
      $("#interval_count").val(0);
      $('.tiered').css('display','none');
  }
});
jQuery(document).delegate('a.add-record', 'click', function(e) {
//   var arr = $('input[name="up_to[]"]').map(function () {
//     return parseInt(this.value); // $(this).val()
// }).get();
// arr.pop();//remove the last infinity
// console.log("arrLastUnit",arr);
// console.log("max",Math.max(...arr));
// var lastmaxvalue=Math.max(...arr);
     e.preventDefault();    
     var content = jQuery('#sample_table tr'),
     size = jQuery('#tbl_posts >tbody >tr').length + 1,
     element = null,    
     element = content.clone();
     element.attr('id', 'rec-'+size);
    //  element.attr('min', lastmaxvalue);
     element.find('.delete-record').attr('data-id', size);
     element.appendTo('#tbl_posts_body');
     element.find('.sn').html(size);
     element.find('.tiertext').html('FOR THE NEXT');
     element.find('.up_to').attr('name', 'rows['+size+'][up_to]');
     element.find('.unit_amount').attr('name', 'rows['+size+'][unit_amount]');
     element.find('.flat_amount').attr('name', 'rows['+size+'][flat_amount]');
     
    //  console.log('lastunitinput',$('tr#rec-'+size-1+'td input.up_to'));
    var value = parseInt(size); 
   var vals = (size-1);
    //  console.log('lastunitinputid','tr#rec-'+vals);
    //  console.log('lastunitinputval',$('tr#rec-'+vals+' '+'td input.up_to').val());
    $('tr#rec-'+size+' '+'td input.up_to').val(1000);	
     $('tr#rec-'+size+' '+'td input.up_to').prop('min',parseInt($('tr#rec-'+vals+' '+'td input.up_to').val()));
     if($('tr#rec-'+vals+' '+'td input.up_to').val()=='1000'){
       console.log('infinity is...