How to set modal popup text editor to normal input box when dynamically add rows using jQuery

dynamically add rows to table using javascript
add and delete rows dynamically with textboxes using jquery
how to add row in html table dynamically using jquery
add new row in table on button click using javascript
how to add textbox dynamically in table using javascript
how to add edit and delete rows of a html table with javascript
how to add data in html table dynamically using javascript
how to add, edit and delete rows of a html table with jquery

I have the dynamic data table, its all working perfectly but im facing small problem that is, First row is working properly and it is stable, the Second row "NARRATION" column, is only the problem.

That means Second row narration column having input popup text editor, thats fine its working, now i click ADD NEW button another row will come and click narrate column its again show the popup text editor.. i dont want like that..

I want change the input modal text editor to normal input box. thats appear on dynamically added rows when i click add new button.

Want 1st two rows is should want popup text editor, and dynamic added rows only wants to be input boxes..

Full Code FIDDLE

/* TABLE JS */

$(document).ready(function() {
  $("#add_row").on("click", function() {
    // Dynamic Rows Code

    // Get max row id and set new id
    var newid = 0;
    $.each($("#tab_logic tr"), function() {
      if (parseInt($(this).data("id")) > newid) {
        newid = parseInt($(this).data("id"));
      }
    });
    newid++;

    var tr = $("<tr></tr>", {
      id: "addr" + newid,
      "data-id": newid
    });

    // loop through each td and create new elements with name of newid
    $.each($("#tab_logic tbody tr:nth(1) td"), function() {
      var td;
      var cur_td = $(this);

      var children = cur_td.children();

      // add new td and element if it has a nane
      if ($(this).data("name") !== undefined) {
        td = $("<td></td>", {
          "data-name": $(cur_td).data("name")
        });

        var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
        c.attr("name", $(cur_td).data("name") + newid);
        c.appendTo($(td));
        td.appendTo($(tr));
      } else {
        td = $("<td></td>", {
          'text': $('#tab_logic tr').length
        }).appendTo($(tr));
      }
    });

    // add the new row
    $(tr).appendTo($('#tab_logic'));

    $(tr).find("td button.row-remove").on("click", function() {
      $(this).closest("tr").remove();
    });
  });

  // Sortable Code
  var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();

    $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
    });

    return $helper;
  };

  $(".table-sortable tbody").sortable({
    helper: fixHelperModified
  }).disableSelection();
  $(".table-sortable thead").disableSelection();
  $("#add_row").trigger("click");
});

/* POPUP JS */
$('.cashmodal_btn').on('click', function() {
  let val = $('.myInput').val();
  $('#pay_narrat').val(val);
});

$('.cashmodal_btn').on('click', function() {
  let val = $('.acnarrate').val();
  $('#acc_narrat').val(val);
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>


<!-- table -->

<a id="add_row" class="btn btn-primary float-right adRow">Add New</a>
<div class="col-md-12 table-responsive">
  <table class="table table-bordered table-hover table-sortable" id="tab_logic">
    <thead style="background-color: #680779;
                                                        color: #fff;">
      <tr>
        <th class="text-center">
          Account Code
        </th>
        <th class="text-center">
          A/c Name*
        </th>
        <th class="text-center">
          Narration*
        </th>
        <th class="text-center">
          Debit*
        </th>
        <th class="text-center">
          Credit
        </th>
        <th class="text-center" style="border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;">
          Action
        </th>
      </tr>
    </thead>
    <tbody>
      <tr id="fst_row">
        <td>
          <input type="number" id="payacc_code" placeholder='Enter A/c code' class="form-control" />
        </td>
        <td>
          <select class="form-control" id="payacc">
            <option value="">Select TDS A/c name</option>
            <option value="1">JOE</option>
            <option value="2">JOE 2</option>
            <option value="3">JOE 3</option>
          </select>
        </td>
        <td>
          <input type="text" class="form-control" id="pay_narrat" placeholder="Enter your here" data-toggle="modal" data-target="#narratModal" />
        </td>
        <td>
          <input type="number" id="paydeb" value="100" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly />
        </td>
        <td>
          <input type="number" id="paycredit" placeholder='Credit Amount' class="form-control" readonly />
        </td>

        <td>
          <button class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn' style="cursor: not-allowed" disabled><span aria-hidden="true">×</span></button>
        </td>
      </tr>
      <tr id='addr0' class="hidden">
        <td data-name="cashCode">
          <input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" />
        </td>
        <td data-name="sel">
          <select class="form-control" name="cashacc_sel" id="cashacc_sel">
            <option value="">Select A/c name</option>
            <option value="1">Plumz</option>
            <option value="2">Plumz 2</option>
            <option value="3">Plumz 3</option>
          </select>
        </td>
        <td data-name="narrate">
          <input type="text" class="form-control" id="acc_narrat" placeholder="Enter your here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
        </td>
        <td data-name="dbt">
          <input type="number" id="cashdeb" name='cashdeb' placeholder='Debit Amount' data-action="sumDebit" class="form-control" />
        </td>
        <td data-name="crdit">
          <input type="number" id="cashcredit" name='cashcredit' placeholder='Credit Amount' class="form-control" readonly />
        </td>

        <td data-name="del">
          <button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn'><span aria-hidden="true">×</span></button>
        </td>
      </tr>
    </tbody>
  </table>
</div>


<!-- narration text popup modal -->

<div class="modal fade" id="narratModal" tabindex="-1" role="dialog" aria-labelledby="narratModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title modal_head" id="narratModalLabel">Narration</h4>
      </div>
      <div class="modal-body">
        <label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>
        <input class="myInput form-control form-control-sm" style="height: 7em;" placeholder="Enter Here" />
        <span class="modal_valid">0/200 Characterts entered</span>
      </div>
      <div class="modal-footer narr_footer">
        <button type="button" class="btn btn-primary cashmodal_btn" id="narrat_ok" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="accnarratModal" tabindex="-1" role="dialog" aria-labelledby="accnarratModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title modal_head" id="accnarratModalLabel">Narration</h4>
      </div>
      <div class="modal-body">
        <label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>

        <textarea class="acnarrate form-control form-control-sm" style="height: 7em;" placeholder="Enter Here"></textarea>
        <span class="modal_valid">0/200 Characterts entered</span>
      </div>
      <div class="modal-footer narr_footer">
        <button type="button" class="btn btn-primary cashmodal_btn" id="accnarrat_ok" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

Hi I understand your problem I updated your fiddle .

you just need to remove data-toggle & data-target property from newly created row. because you are cloning so each function with elements are cloning.

$("#"+trId +" #acc_narrat").removeAttr("data-target")
$("#"+trId +" #acc_narrat").removeAttr("data-toggle")

Here is working example

Dynamically Add/Remove rows in HTML table using JavaScript, Using JavaScript to add/delete/remove rows from a table in HTML For example​, if you have entered text “abc” in textbox of 1st row and you press We need to append [] at the end of name of each input boxes How to apply HTML User Interface Effects using jQuery. It is also the same in the EDIT.jsp. How to set modal popup text editor to normal input box when dynamically add rows using jQuery Hot Network Questions Can airpod with wrong spelling on the case be original?


I got you're problem check this code

Update JS:

/* TABLE JS */

$(document).ready(function() {
  $("#add_row").on("click", function() {
    // Dynamic Rows Code

    // Get max row id and set new id
    var newid = 0;
    $.each($("#tab_logic tr"), function() {
      if (parseInt($(this).data("id")) > newid) {
        newid = parseInt($(this).data("id"));
      }
    });
    newid++;

    var tr = $("<tr></tr>", {
      id: "addr" + newid,
      "data-id": newid
    });

    // loop through each td and create new elements with name of newid
    $.each($("#tab_logic tbody tr:nth(1) td"), function() {
      var td;
      var cur_td = $(this);

      var children = cur_td.children();

      // add new td and element if it has a nane
      if ($(this).data("name") !== undefined) {
        td = $("<td></td>", {
          "data-name": $(cur_td).data("name")
        });

        var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
        c.attr("name", $(cur_td).data("name") + newid);
        c.appendTo($(td));
        td.appendTo($(tr));
      } else {
        td = $("<td></td>", {
          'text': $('#tab_logic tr').length
        }).appendTo($(tr));
      }
    });

    // add the new row
    $(tr).appendTo($('#tab_logic'));

    $(tr).find("td button.row-remove").on("click", function() {
      $(this).closest("tr").remove();
    });
  });

  // Sortable Code
  var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();

    $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
    });

    return $helper;
  };

  $(".table-sortable tbody").sortable({
    helper: fixHelperModified
  }).disableSelection();
  $(".table-sortable thead").disableSelection();
  $("#add_row").trigger("click");
});

/* POPUP JS */
$('.cashmodal_btn').on('click', function() {
  let val = $('.myInput').val();
  $('#pay_narrat').val(val);
});

$('.cashmodal_btn').on('click', function() {
  let val = $('.acnarrate').val();
  $(".acnarrate").val("");
  $('.active').val(val);
  $(".active").removeClass("active");
})

$(document).on('click',"input#acc_narrat", function() {
  $(".active").removeClass("active");
  $(".acnarrate").val( $(this).val() );
  $(this).addClass("active");
})

Set focus on modal popup jquery, When the modal box is shown, I'd like the cursor to be placed in the txtFirst textbox. Subject: ASPxGridview - How to set focus on ASPxHtmlEditor in popup edit form Add onClick … jquery - first - set focus on modal popup Autofocus input in Questions: I load a dynamic bootstrap modal and it contains few text inputs. When this happens, the “active” class is removed from the pop-up classes, causing them to revert to their previous styling that has the visibility set to hidden. Add both statements of jQuery to your document. If all this is completed correctly, you will have a rudimentary modal pop-up box.


You are cloning row and changing ids but you need to remove data-target="#narratModal" from the input box so that modal will not be shown. Just find the input box and remove data-target="#narratModal" attribute, see below code

/* TABLE JS */

$(document).ready(function() {
  $("#add_row").on("click", function() {
    // Dynamic Rows Code

    // Get max row id and set new id
    var newid = 0;
    $.each($("#tab_logic tr"), function() {
      if (parseInt($(this).data("id")) > newid) {
        newid = parseInt($(this).data("id"));
      }
    });
    newid++;

    var tr = $("<tr></tr>", {
      id: "addr" + newid,
      "data-id": newid
    });

    // loop through each td and create new elements with name of newid
    $.each($("#tab_logic tbody tr:nth(1) td"), function() {
      var td;
      var cur_td = $(this);

      var children = cur_td.children();

      // add new td and element if it has a nane
      if ($(this).data("name") !== undefined) {
        td = $("<td></td>", {
          "data-name": $(cur_td).data("name")
        });

        var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
        c.attr("name", $(cur_td).data("name") + newid);
        c.appendTo($(td));
        td.appendTo($(tr));
      } else {
        td = $("<td></td>", {
          'text': $('#tab_logic tr').length
        }).appendTo($(tr));
      }
    });

    // add the new row
    $(tr).appendTo($('#tab_logic'));

    $(tr).find("td button.row-remove").on("click", function() {
      $(this).closest("tr").remove();
    });
    // remove data-target so that popup will not be shown
     $(tr).find('input[name^=narrat]').removeAttr('data-target');
  });

  // Sortable Code
  var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();

    $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
    });

    return $helper;
  };

  $(".table-sortable tbody").sortable({
    helper: fixHelperModified
  }).disableSelection();
  $(".table-sortable thead").disableSelection();
  $("#add_row").trigger("click");
});

/* POPUP JS */
$('.cashmodal_btn').on('click', function() {
  let val = $('.myInput').val();
  $('#pay_narrat').val(val);
});

$('.cashmodal_btn').on('click', function() {
  let val = $('.acnarrate').val();
  $('#acc_narrat').val(val);
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>


<!-- table -->

<a id="add_row" class="btn btn-primary float-right adRow">Add New</a>
<div class="col-md-12 table-responsive">
  <table class="table table-bordered table-hover table-sortable" id="tab_logic">
    <thead style="background-color: #680779;
                                                        color: #fff;">
      <tr>
        <th class="text-center">
          Account Code
        </th>
        <th class="text-center">
          A/c Name*
        </th>
        <th class="text-center">
          Narration*
        </th>
        <th class="text-center">
          Debit*
        </th>
        <th class="text-center">
          Credit
        </th>
        <th class="text-center" style="border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;">
          Action
        </th>
      </tr>
    </thead>
    <tbody>
      <tr id="fst_row">
        <td>
          <input type="number" id="payacc_code" placeholder='Enter A/c code' class="form-control" />
        </td>
        <td>
          <select class="form-control" id="payacc">
            <option value="">Select TDS A/c name</option>
            <option value="1">JOE</option>
            <option value="2">JOE 2</option>
            <option value="3">JOE 3</option>
          </select>
        </td>
        <td>
          <input type="text" class="form-control" id="pay_narrat" placeholder="Enter your here" data-toggle="modal" data-target="#narratModal" />
        </td>
        <td>
          <input type="number" id="paydeb" value="100" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly />
        </td>
        <td>
          <input type="number" id="paycredit" placeholder='Credit Amount' class="form-control" readonly />
        </td>

        <td>
          <button class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn' style="cursor: not-allowed" disabled><span aria-hidden="true">×</span></button>
        </td>
      </tr>
      <tr id='addr0' class="hidden">
        <td data-name="cashCode">
          <input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" />
        </td>
        <td data-name="sel">
          <select class="form-control" name="cashacc_sel" id="cashacc_sel">
            <option value="">Select A/c name</option>
            <option value="1">Plumz</option>
            <option value="2">Plumz 2</option>
            <option value="3">Plumz 3</option>
          </select>
        </td>
        <td data-name="narrate">
          <input type="text" class="form-control" id="acc_narrat" placeholder="Enter your here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
        </td>
        <td data-name="dbt">
          <input type="number" id="cashdeb" name='cashdeb' placeholder='Debit Amount' data-action="sumDebit" class="form-control" />
        </td>
        <td data-name="crdit">
          <input type="number" id="cashcredit" name='cashcredit' placeholder='Credit Amount' class="form-control" readonly />
        </td>

        <td data-name="del">
          <button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn'><span aria-hidden="true">×</span></button>
        </td>
      </tr>
    </tbody>
  </table>
</div>


<!-- narration text popup modal -->

<div class="modal fade" id="narratModal" tabindex="-1" role="dialog" aria-labelledby="narratModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title modal_head" id="narratModalLabel">Narration</h4>
      </div>
      <div class="modal-body">
        <label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>
        <input class="myInput form-control form-control-sm" style="height: 7em;" placeholder="Enter Here" />
        <span class="modal_valid">0/200 Characterts entered</span>
      </div>
      <div class="modal-footer narr_footer">
        <button type="button" class="btn btn-primary cashmodal_btn" id="narrat_ok" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="accnarratModal" tabindex="-1" role="dialog" aria-labelledby="accnarratModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title modal_head" id="accnarratModalLabel">Narration</h4>
      </div>
      <div class="modal-body">
        <label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>

        <textarea class="acnarrate form-control form-control-sm" style="height: 7em;" placeholder="Enter Here"></textarea>
        <span class="modal_valid">0/200 Characterts entered</span>
      </div>
      <div class="modal-footer narr_footer">
        <button type="button" class="btn btn-primary cashmodal_btn" id="accnarrat_ok" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

Modal · Bootstrap, modal-dialog at the end of the modal fade-in animation. If you want for example a zoom-in animation, you can set $modal-fade-transform: scale(.8) . I have one button in my page, when we click on that button model popup comes in with 5text boxes(@html.editorfor). How we can set focus on last textbox. i already tried autofocus="autofocus" or $('#texteditor').focus();


You just have to properly clone your tds and remove the data-target property from the input field.

Here is the update I made to your element loop.

// loop through each td and create new elements with name of newid
$.each($("#tab_logic tbody tr:nth(1) td"), function() {
  var td;
  var cur_td = $(this).clone();  // <-- clone the td

  var children = cur_td.children();
  $(cur_td).find('#acc_narrat').removeAttr('data-toggle'); // <--- remove the attribute

  // add new td and element if it has a nane
  if ($(this).data("name") !== undefined) {
    td = $("<td></td>", {
      "data-name": $(cur_td).data("name")
    });

    var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
    c.attr("name", $(cur_td).data("name") + newid);
    c.appendTo($(td));
    td.appendTo($(tr));
  } else {
    td = $("<td></td>", {
      'text': $('#tab_logic tr').length
    }).appendTo($(tr));
  }
});

In short, You have to clone var cur_td = $(this).clone(); the columns in order to loose the reference to your existing element. And remove the relation to the modal from the element. $(cur_td).find('#acc_narrat').removeAttr('data-toggle');

I've updated your fiddle here.

Datatables edit button each row, I need a custom text for each command button. feel free to contact MSDNFSF@​microsoft. edit: the title of the dialog box for editing a row. Here we will use a simple Bootstrap Modal Popup to create add and edit form. Jan 12, 2018 · jQuery DataTables plug-in has native support for child rows with row(). number of rows  This simple modal popup will less impact on page load time than the jQuery plugin. We’ll use JavaScript and CSS to create this simple popup and you can easily integrate this modal popup to the web page. HTML. Add this Simple HTML to the web page where you want to show the modal popup. The following HTML contains an anchor link to open the


Remove attribute data-toggle from TD before appending to $('#tab_logic')

/* TABLE JS */

$(document).ready(function() {
  $("#add_row").on("click", function() {
    // Dynamic Rows Code

    // Get max row id and set new id
    var newid = 0;
    $.each($("#tab_logic tr"), function() {
      if (parseInt($(this).data("id")) > newid) {
        newid = parseInt($(this).data("id"));
      }
    });
    newid++;

    var tr = $("<tr></tr>", {
      id: "addr" + newid,
      "data-id": newid
    });

    // loop through each td and create new elements with name of newid
    $.each($("#tab_logic tbody tr:nth(1) td"), function() {
      var td;
      var cur_td = $(this);

      var children = cur_td.children();

      // add new td and element if it has a nane
      if ($(this).data("name") !== undefined) {
        td = $("<td></td>", {
          "data-name": $(cur_td).data("name")
        });

        var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
        c.attr("name", $(cur_td).data("name") + newid);
        c.appendTo($(td));
        td.appendTo($(tr));
      } else {
        td = $("<td></td>", {
          'text': $('#tab_logic tr').length
        }).appendTo($(tr));
      }
    });
    
    $(tr).find('#acc_narrat').removeAttr('data-toggle');

    // add the new row
    $(tr).appendTo($('#tab_logic'));

    $(tr).find("td button.row-remove").on("click", function() {
      $(this).closest("tr").remove();
    });
  });

  // Sortable Code
  var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();

    $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
    });

    return $helper;
  };

  $(".table-sortable tbody").sortable({
    helper: fixHelperModified
  }).disableSelection();
  $(".table-sortable thead").disableSelection();
  $("#add_row").trigger("click");
});

/* POPUP JS */
$('.cashmodal_btn').on('click', function() {
  let val = $('.myInput').val();
  $('#pay_narrat').val(val);
});

$('.cashmodal_btn').on('click', function() {
  let val = $('.acnarrate').val();
  $('#acc_narrat').val(val);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>


<!-- table -->

<a id="add_row" class="btn btn-primary float-right adRow">Add New</a>
<div class="col-md-12 table-responsive">
  <table class="table table-bordered table-hover table-sortable" id="tab_logic">
    <thead style="background-color: #680779;
                                                        color: #fff;">
      <tr>
        <th class="text-center">
          Account Code
        </th>
        <th class="text-center">
          A/c Name*
        </th>
        <th class="text-center">
          Narration*
        </th>
        <th class="text-center">
          Debit*
        </th>
        <th class="text-center">
          Credit
        </th>
        <th class="text-center" style="border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;">
          Action
        </th>
      </tr>
    </thead>
    <tbody>
      <tr id="fst_row">
        <td>
          <input type="number" id="payacc_code" placeholder='Enter A/c code' class="form-control" />
        </td>
        <td>
          <select class="form-control" id="payacc">
            <option value="">Select TDS A/c name</option>
            <option value="1">JOE</option>
            <option value="2">JOE 2</option>
            <option value="3">JOE 3</option>
          </select>
        </td>
        <td>
          <input type="text" class="form-control" id="pay_narrat" placeholder="Enter your here" data-toggle="modal" data-target="#narratModal" />
        </td>
        <td>
          <input type="number" id="paydeb" value="100" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly />
        </td>
        <td>
          <input type="number" id="paycredit" placeholder='Credit Amount' class="form-control" readonly />
        </td>

        <td>
          <button class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn' style="cursor: not-allowed" disabled><span aria-hidden="true">×</span></button>
        </td>
      </tr>
      <tr id='addr0' class="hidden">
        <td data-name="cashCode">
          <input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" />
        </td>
        <td data-name="sel">
          <select class="form-control" name="cashacc_sel" id="cashacc_sel">
            <option value="">Select A/c name</option>
            <option value="1">Plumz</option>
            <option value="2">Plumz 2</option>
            <option value="3">Plumz 3</option>
          </select>
        </td>
        <td data-name="narrate">
          <input type="text" class="form-control" id="acc_narrat" placeholder="Enter your here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
        </td>
        <td data-name="dbt">
          <input type="number" id="cashdeb" name='cashdeb' placeholder='Debit Amount' data-action="sumDebit" class="form-control" />
        </td>
        <td data-name="crdit">
          <input type="number" id="cashcredit" name='cashcredit' placeholder='Credit Amount' class="form-control" readonly />
        </td>

        <td data-name="del">
          <button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn'><span aria-hidden="true">×</span></button>
        </td>
      </tr>
    </tbody>
  </table>
</div>


<!-- narration text popup modal -->

<div class="modal fade" id="narratModal" tabindex="-1" role="dialog" aria-labelledby="narratModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title modal_head" id="narratModalLabel">Narration</h4>
      </div>
      <div class="modal-body">
        <label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>
        <input class="myInput form-control form-control-sm" style="height: 7em;" placeholder="Enter Here" />
        <span class="modal_valid">0/200 Characterts entered</span>
      </div>
      <div class="modal-footer narr_footer">
        <button type="button" class="btn btn-primary cashmodal_btn" id="narrat_ok" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="accnarratModal" tabindex="-1" role="dialog" aria-labelledby="accnarratModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title modal_head" id="accnarratModalLabel">Narration</h4>
      </div>
      <div class="modal-body">
        <label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>

        <textarea class="acnarrate form-control form-control-sm" style="height: 7em;" placeholder="Enter Here"></textarea>
        <span class="modal_valid">0/200 Characterts entered</span>
      </div>
      <div class="modal-footer narr_footer">
        <button type="button" class="btn btn-primary cashmodal_btn" id="accnarrat_ok" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

Bootstrap Modal, A Modal is a dialog box/popup window that can be used for lightboxes, user and then add class .modal-top-right (or other classes from list above) to set a position to <div class="modal-content"> <div class="modal-body"> <div class="​row d-flex <div class="modal-body"> <form> <div class="md-form"> <input type​="text"  How To Create a Modal Box. A modal is a dialog box/popup window that is displayed on top of the current page: <p>Some text in the Modal..</p> body and footer


How to get dynamic data in bootstrap modal?, Hello, I am developing an app which requires options like view, edit and delete details. So for viewing details I am using bootstrap modal to show the Get id with jQuery; Pass it to controller via Ajax; Get your result back you need to create normal controller with the information that you want to display  Problem: I have an modal window in my cred form. I would get two value's back to my cred form. When i click on the link in de modal form i would like that the input field naam is filled in and i would get the number from the href in an other field.


Understanding Bootstrap Modals, In his dive into the popular CSS framework Bootstrap, Syed Fazle In this tutorial​, we'll be talking about one of the most useful jQuery videos (similar to a standard light box), or even social media widgets. Add a modifier class modal-​lg to the .modal-dialog div for a larger <div class="row mb-4"> jQuery dialog box is one of the way to interact with user. Here you will learn to create dialog form with name and email field and a submit button using jQuery dialog UI.


Jquery append button with onclick, Sep 15, 2017 · append table row dynamically using jQuery September 15, 2017 to call a function: if it was a onclick function i would write in normal jquery: 23 hours clicked. display text box value by clicking on submit button - jquery and html. Similarly we can create the edit partial view and open as a modal popup so  The Modal is a popup window or dialog box that displayed over the current web page. It is very useful to display HTML content/elements on a single page. If your web application uses Bootstrap, the modal popup can be easily implemented on the web pages.