Adding New Input Field Doesn't Update The Value Of Existing Ones

Here's how it's supposed to work. By default there are two sets of input fields where the percentage fields have a value of 50% each. Now whenever a new input field is added, the p

Solution 1:

I am not quite sure what exactly you want to achieve with your script. But I had a go at making a fresh start by removing redundant bits. The following snippet will allow you to add or remove input lines and it will adjust the percentages accordingly.

Maybe you can specifiy how you want the script to react on any user input?

// add flields:
function addfields(){
   let all=$('.urls-container'), r=$('div:last',all).clone(),
       url=r.find('input[type=url]')[0];
   url.placeholder=+url.placeholder+1;
   $('.perc',r).removeAttr('data-manual');
   all.append(r); calcperc();
 }
// even distribution:
function calcperc(){
  let fix=$('.perc[data-manual]'),sum=0;
  fix.each(function(){sum+=parseFloat(this.value)});
  let rest= $('.perc').not(fix);
  rest.val(((100-sum)/rest.length).toFixed(2)+'%')
}

// manual distribution:
function recalc(){let inps=$('.perc'),cur=parseFloat(this.value);
 if (inps.length>1){
  this.value=cur.toFixed(2)+'%'; this.dataset.manual=1;
  calcperc();
} else this.value="100%"
}
// delegated event management:
$('form')
 .on('submit',function(e){e.preventDefault()}) // de-activate submit for testing
 .on('change','.perc',recalc)
 .on('click','.delete-btn',function(){$(this).parent().remove();calcperc()})
 .on('click','#addField',addfields);
 
 // initial distribution:
 calcperc();

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<form action="#" method="POST">

  <div class="urls-container">
    <div class="url-pair">
      <input type="url" placeholder="1">
      <input type="text" class="perc">
      <button class="delete-btn" type="button">Delete</button>
    </div>

    <div class="url-pair">
      <input type="url" placeholder="2">
      <input type="text" class="perc">
      <button class="delete-btn" type="button">Delete</button>
    </div>

    <span></span>
  </div>

  <div>
    <div>
      <button type="button" id="addField">Add Field</button>
    </div>

    <div>
      <button type="submit">Create</button>
    </div>
  </div>

</form>

My curent version of recalc() allows you to overwrite one of the percentage values. All other values will then be adjusted, so the total is 100% again.

Please also note that in my version the recalc() gets fired on the input event and not the keyup event, otherwise the action of adding the percentage sign would seriously interfere with any input attempt by the user.

Edit
The lastet edit involves "marking" manually changed percentages with a data-manual attribute in the input field. This will protect that field from future recalculations. The remaining percentages will be distributed evenly among the non-fixed fields.