How To Access Parent Element And Then Get It's Value And Then Append To Other Element When Adding A Row?

My goal is to get the previous value inside my input element labeled 'SERIAL END' then automatically append it's value when adding a row to 'SERIAL START' and not only append but w

Solution 1:

You can get length of tr inside tbody then using that length get reference of previous tr then use td:eq(3) this will search fourth td because index starts from 0 then use that value to get value and add it in newly created tr input .

Also , you don't need to use same php code to create select-box just clone first select-box and then use same to pass inside td which are newly created .

Then , to intialize selectpicker which are added dynamically use $("table.order-list tr:last").find(".selectpicker").. this line will get last tr which is added and then inside that tr it will selectpicker .

Demo Code :

$(document).ready(function() {
  $('.selectpicker').selectpicker({
    liveSearch: true,
    showSubtext: true
  });
  $("#addrow").on("click", function() {
    var cloned = $("tbody select:first").clone() //cloned first tr selectvar value = $("tbody tr").length - 1//get tr length - 1 (because tr start from 0 index)var new_start = parseInt($("tbody tr:eq(" + value + ") td:eq(3) input").val()) + 1//get previous input box valuevar tbl = document.getElementById('tbl').rows.length;
    if (tbl === 5) {
      alert("It is limited for 5 rows only");
    } else {

      var newRow = $("<tr id='tablerow_'" + (value + 1) + "'>");
      var cols = "";
      cols += '<td><select onchange="selectmodel(this)"data-live-search="true" placeholder="Select your model name" class="form-control selectpicker show-menu-arrow " name="model[]" >' + $(cloned).html() + '</select></td>';
      cols += '<td><input value="' + $("#lotno").val() + '" type="text" class="form-control" name="code[]" readonly="" /></td>';
      cols +=
        '<td><input type="number" class="form-control" name="serstart[]" value="' + new_start + '" readonly/></td>';
      cols +=
        '<td><input type="number" class="form-control"name="serend[]"  value="' + $("#serend").val() + '"/></td>';
      newRow.append(cols);
      $("table.order-list").append(newRow)
      //intialize selectpicker which added last
      $("table.order-list tr:last").find('.selectpicker').selectpicker({
        liveSearch: true,
        showSubtext: true
      });
    }
  });
});

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css"integrity="sha512-ARJR74swou2y0Q2V9k0GbzQ/5vJ2RBSoCWokg4zkfM29Fb3vZEQyv0iWBMW/yvKgyHSR/7D64pFMmU8nYmbRkg=="crossorigin="anonymous"
/><scriptsrc="https://code.jquery.com/jquery-3.5.0.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"integrity="sha512-yDlE7vpGDP7o2eftkCiPZ+yuUyEcaBwoJoIhdXv71KZWugFqEphIS3PU60lEkFaz8RxaVsMpSvQxMBaKVwA5xg=="crossorigin="anonymous"></script><divclass="col-lg-12"><inputtype="button"class="btn btn-primary pull-left"id="addrow"value="Add Row" />&nbsp;<inputtype="button"class="ibtnDel btn btn-md btn-danger"id="remove"value="Delete Row"><br>&nbsp;<tablewidth="100%"class="table order-list table-striped table-bordered table-hover"id="myTable"><thead><tr><thclass="col-sm-3"><center />Model
        </th><thclass="col-sm-3"><center />Code
        </th><thclass="col-sm-3"><center />Serial Start
        </th><thclass="col-sm-3"><center />Serial End
        </th></tr></thead><tbodyid='tbl'><trid="tablerow_0"><td><selectname="model[]"id="model0"class="form-control selectpicker show-menu-arrow"data-live-search="true"title="Select your model name"onchange="selectmodel(this)"required><optionselecteddisabled> Select your model name</option><optionvalue='1'>A</option><optionvalue='2'>A2</option><optionvalue='3'>A3</option></select></td><td><inputname="code[]"type="text"id="code0"value="M12"class="form-control"readonly="" /></td><td><inputtype="number"name="serstart[]"id="serstart0"value="1"class="form-control"readonly /></td><td><inputtype="number"name="serend[]"id="serend0"value="11"class="form-control"></td></tr></tbody></table><buttonid="submit"type="submit"class="btn btn-primary pull-right"><spanclass="fa  fa-check"> &nbsp Submit</span></button></form></div>