JSFiddle - React, Tailwind, and code Playground

by kirito0709

HTML

<table id="doptable">
  <tr style="font-size:9px;">
    <th>Позиция</th>
    <th>Кол-во</th>
    <th>Цена за ед.</th>
    <th>Стоимость</th>
    <th>Действие</th>
  </tr>
  <tr id="rowDopOption1">
    <td><input type="text" size="50" placeholder="Укажите дополнительную опцию"></td>
    <td><input type="text" size="3"placeholder=""></td>
    <td><input type="text" size="6"></td>
    <td><div style="height: 22px; border: 1px solid #000;"></div></td>
    <td></td>
  </tr>
  <tr id="rowDopOption2">
    <td><input type="text" size="50" placeholder="Укажите дополнительную опцию"></td>
    <td><input type="text" size="3"placeholder=""></td>
    <td><input type="text" size="6"></td>
    <td><div style="height: 22px; border: 1px solid #000;"></div></td>
    <td></td>
  </tr>
  <tr id="rowDopOption3">
    <td><input type="text" size="50" placeholder="Укажите дополнительную опцию"></td>
    <td><input type="text" size="3"placeholder=""></td>
    <td><input type="text" size="6"></td>
    <td><div style="height: 22px; border: 1px solid #000;"></div></td>
    <td></td>
  </tr>
  <tr id="rowDopOption4">
    <td><input type="text" size="50" placeholder="Укажите дополнительную опцию"></td>
    <td><input type="text" size="3"placeholder=""></td>
    <td><input type="text" size="6"></td>
    <td><div style="height: 22px; border: 1px solid #000;"></div></td>
    <td></td>
  </tr>
  <tr id="rowDopOption5">
    <td><input type="text" size="50" placeholder="Укажите дополнительную опцию"></td>
    <td><input type="text" size="3"placeholder=""></td>
    <td><input type="text" size="6"></td>
    <td><div style="height: 22px; border: 1px solid #000;"></div></td>
    <td></td>
  </tr>
  <tr id="rowDopOption6">
    <td><input type="text" size="50" placeholder="Укажите дополнительную опцию"></td>
    <td><input type="text" size="3"placeholder=""></td>
    <td><input type="text" size="6"></td>
    <td><div style="height: 22px; border: 1px solid #000;"></div></td>
    <td></td>
  </tr>
  <tr...

JavaScript

$(function(){
   $("#addrowdop").click(function(){
   var idLastTR = $('#doptable tr:last-child').attr('id');
   var idLastTRid = '#'+idLastTR;
   var numsRows = document.getElementById("doptable").rows.length;
   var newTR1 = "<tr id=\"rowDopOption";
   var newTR2 = numsRows;
   var newTR3 = "\"><td><input type=\"text\" size=\"50\" placeholder=\"Укажите дополнительную опцию\"></td><td><input type=\"text\" size=\"3\"></td><td><input type=\"text\" size=\"6\"></td><td><div style=\"height: 22px; border: 1px solid #000;\"></div></td><td><input value=\"удалить\" class=\"deleteRoW\" id=\"deleteRowInput";
    var newTR4 = "\" type=\"submit\" size=\"6\"></td></tr>";
   //alert(numsRows);
   var newTR = newTR1+newTR2+newTR3+newTR2+newTR4;
   $(newTR).insertAfter(idLastTRid);
  // var aLLidLastTR = $('#doptable tr').each(function(){$(this).attr('id')});
 //  alert(aLLidLastTR);
   });
});

$(document).delegate('.deleteRoW', 'click', function()
{
    var rowDelIndex = $(this).parent().parent().attr('id');
    var rowDelIndexId = '#'+rowDelIndex;
    $(rowDelIndexId).remove();
});
var a = [];
   $("#doptable tr").each(function(){$(this).each(function(){$(this).attr('id').val("АХАХАХАХАХА")})
console.log();
//  $("td",this).each(function(){
//    console.log(this);
//  });
});