Appended new row is not behaving like previous one (row)

I have a HTML table in side which i have several td as input field,my table is dynamic, when page loads i am appending the 1st row of my table and focus on first input field, in my case i.e Item Name

I have 3 input fields in my row which are Item Name,Unit Qty and Disc%

• When user clicks inside ItemName input field i am searching for itemnames from a data which is objects inside a array to populate itemnames
• After selecting Item NAme i am moving my focus to next input field which is Unit Qty then after that focus in to next input field which is Disc% in between this some calculation are happening to calculate Total Amount
• Then after this when user is focus out from Disc% i am appending a new row, actually i have a function inside which i have code to append the row, so i am calling that function on focus out of Disc%
• After focus out of Disc% i want my focus should go to the ItemName of new row and should behave like it was behaving (Like search from data) and so on

I have commented the lines in my code to better user understanding what is happening where

function rowappend() // this one is appending row
{
  var markup = '<tr><td><input type="text" class="form-control commantd"name="itemNametd" id="itemNametd">' +
    '</td><td id="itemCodetd" class="commantd"></td>' +
    '<td><input type="text" class="form-control commantd"name="unitQtytd" id="unitQtytd"></td>' +
    '<td id="purRatetd" class="commantd"></td>' +
    '<td><input type="text" class="form-control commantd"name="discPercentagetd" id="discPercentagetd"></td>' +
    '<td id="discAmttd" class="commantd"></td>' +
    '<td id="gstPercentagetd" class="commantd"></td>' +
    '<td id="gstAmttd" class="commantd"></td>' +
    '<td id="totalAmttd" class="commantd"></td></tr>'
  $("table tbody").append(markup);
  $("itemNametd").next().focus();
}
rowappend()


var data = [ //data to populate Item Name search input field
  {
    "ItemName": "Butter"
  },
  {
    "ItemName": "Rice"
  },
  {
    "ItemName": "Milk"
  },
  {
    "ItemName": "Ice Cream"
  },
  {
    "ItemName": "Curd"
  }
]
var data1 = [{ // this data will be dynamic but for now to test i am using this single data
  "ItemName": "Butter",
  "ItemCode": 400564,
  "PurRate": 8,
  "DiscAmt": 6,
  "gstPercentage": 35,
  "gstAmt": 5
}]
var totalAmount = "";
var unitQuantity = "";
$(function() {
  let itemName = data.map(value => { //using autocomplete to for searching input field

    return value.ItemName;
  });
  $("#itemNametd").autocomplete({
    source: itemName
  });
});
$("#itemNametd").focusout(function() { //when user focus out from Item Name doing this

  data1.map(value => {
    $("#itemCodetd").text(value.ItemCode);
    $("#purRatetd").text(value.PurRate);
    $("#discAmttd").text(value.DiscAmt);
    $("#gstPercentahgetd").text(value.gstPercentage);
    $("#gstAmttd").text(value.gstAmt);

  });

});
$("#unitQtytd").focusout(function() { //when user focus out Unit Qty doing some calculation
  unitQuantity = $("#unitQtytd").val();
  purchaseRate = $("#purRatetd").text();
  totalAmount = (parseInt(unitQuantity) * parseInt(purchaseRate));
  $("#totalAmttd").text(totalAmount);

});
$("#discPercentagetd").focusout(function() { //here when user is focus out i am calling the fuinction which is creating new row

  rowappend()



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="container commonDivInvoice">
  <div class="row tableInvoice" id="commonDvScroll">
    <table class="table table-bordered" id="tableInvoice">
      <thead>
        <tr>
          <th id="itemNameth" class="commanth">Item Name</th>
          <th id="itemCodeth" class="commanth">Item Code</th>
          <th id="unitQtyth" class="commanth">Unit Qty</th>
          <th id="purRateth" class="commanth">Pur.Rate</th>
          <th id="discPercentageth" class="commanth">Disc%</th>
          <th id="discAmtth" class="commanth">Disc Amt</th>
          <th id="gstPercentageth" class="commanth">Gst%</th>
          <th id="gstAmtth" class="commanth">Gst Amt</th>
          <th id="totalAmtth" class="commanth">Total Amount</th>


        </tr>
      </thead>
      <tbody>


      </tbody>

    </table>

  </div>
</div>

From my side i think i am using wrong approach to do this task

NOTE :- in future on each focus out i may be doing some calculations so please help me out in that way

I have provided all the information if it is not sufficient then you all can ask me in comments

EDIT

as per Wils's answer after focus out from Disc% new row is appending and focus is also shifting to new row's Item Name but issue is when new row is appending the autocomplete is not working in first row initially when page loads when i type m inside the input field of Item Name all the item name containing m are displayed as drop-down but for 2nd row its not showing up

function rowappend() // this one is appending row
{
  var markup = $('<tr><td><input type="text" class="form-control commantd"name="itemNametd" id="itemNametd">' +
    '</td><td id="itemCodetd" class="commantd"></td>' +
    '<td><input type="text" class="form-control commantd"name="unitQtytd" id="unitQtytd"></td>' +
    '<td id="purRatetd" class="commantd"></td>' +
    '<td><input type="text" class="form-control commantd"name="discPercentagetd" id="discPercentagetd"></td>' +
    '<td id="discAmttd" class="commantd"></td>' +
    '<td id="gstPercentagetd" class="commantd"></td>' +
    '<td id="gstAmttd" class="commantd"></td>' +
    '<td id="totalAmttd" class="commantd"></td></tr>');

  $("table tbody").append(markup);
  $("#itemNametd", markup).focus();
}
rowappend()


var data = [ //data to populate Item Name search input field
  {
    "ItemName": "Butter"
  },
  {
    "ItemName": "Rice"
  },
  {
    "ItemName": "Milk"
  },
  {
    "ItemName": "Ice Cream"
  },
  {
    "ItemName": "Curd"
  }
]
var data1 = [{ // this data will be dynamic but for now to test i am using this single data
  "ItemName": "Butter",
  "ItemCode": 400564,
  "PurRate": 8,
  "DiscAmt": 6,
  "gstPercentage": 35,
  "gstAmt": 5
}]
var totalAmount = "";
var unitQuantity = "";
$(function() {
  let itemName = data.map(value => { //using autocomplete to for searching input field

    return value.ItemName;
  });
  $("#itemNametd").autocomplete({
    source: itemName
  });
});
$("#itemNametd").focusout(function() { //when user focus out from Item Name doing this

  data1.map(value => {
    $("#itemCodetd").text(value.ItemCode);
    $("#purRatetd").text(value.PurRate);
    $("#discAmttd").text(value.DiscAmt);
    $("#gstPercentahgetd").text(value.gstPercentage);
    $("#gstAmttd").text(value.gstAmt);

  });

});
$("#unitQtytd").focusout(function() { //when user focus out Unit Qty doing some calculation
  unitQuantity = $("#unitQtytd").val();
  purchaseRate = $("#purRatetd").text();
  totalAmount = (parseInt(unitQuantity) * parseInt(purchaseRate));
  $("#totalAmttd").text(totalAmount);

});

$('body').on('focusout', '#discPercentagetd', function() {
  rowappend()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="container commonDivInvoice">
  <div class="row tableInvoice" id="commonDvScroll">
    <table class="table table-bordered" id="tableInvoice">
      <thead>
        <tr>
          <th id="itemNameth" class="commanth">Item Name</th>
          <th id="itemCodeth" class="commanth">Item Code</th>
          <th id="unitQtyth" class="commanth">Unit Qty</th>
          <th id="purRateth" class="commanth">Pur.Rate</th>
          <th id="discPercentageth" class="commanth">Disc%</th>
          <th id="discAmtth" class="commanth">Disc Amt</th>
          <th id="gstPercentageth" class="commanth">Gst%</th>
          <th id="gstAmtth" class="commanth">Gst Amt</th>
          <th id="totalAmtth" class="commanth">Total Amount</th>


        </tr>
      </thead>
      <tbody>


      </tbody>

    </table>

  </div>
</div>

Anyone out here please help me out

from Appended new row is not behaving like previous one (row)