append with focus textbox and delete dynamic

Question

I am trying to create the append and delete input in jquery, my code is working perfectly but as I delete any input and try to again append the box it not working properly, and also autofocus in appended input not working.

I want to create as change the input value it will auto jump to the next box. My code working fine but as I delete any row from that time it not working properly.

Please help How me achieve the goal and fix this issue permanently.

JSFiddle

let input_inx = 0;

function init_input_focus() {
  $("div#input_body input").change(function() {
    if ($(this).attr("name") == "col1[]") {
      $("b#total_row").text($("div#input_body").children().length + 1)
      $("div#input_body").append(`
      <div class="row mt-1" id="1">
          <div class="col-md-2">
              <input type="text" name="col0[]" onfocus="select();" />
          </div>
          <div class="col-md-3">
              <input type="text" name="col1[]" onfocus="select();" />
          </div>
          <div class="col-md-1">
              <button id="submit" onclick="removeRow(this ,event)" >Remove</button>
          </div>
      </div>
    `);
      init_input_focus()
    }
    input_inx++;
    $("div#input_body input").eq(input_inx).focus();
  })
}

function removeRow(ele, event) {
  $(ele).parent().parent().remove();
  input_inx--;
}
init_input_focus()