JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    
    <head>
        
        <script src="js/pie_chart.js"></script>
        
    </head>
    
    <body>
    
        <form id="tabledata" method="POST">
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>p_name</th>
                        <th colspan="2">p_nums</th>
                        <th>opt</th>
                    </tr>
                </thead>
                
                <tbody id="lines">
                    <tr id="itm_0">
                        <td>1</td>
                        <td><input type="text" placeholder="product name" name="p_0" /></td>
                        <td><input type="range" min=0 step=1 max=100 value="0" name="p_num_0" id="q_slider_0" onchange="document.getElementById('q_num_0').value = this.value;" /></td>
                        <td><input type="number" min=0 step=1 max=100 value="0" id="q_num_0" onInput="document.getElementById('q_slider_0').value = this.value;" /></td>
                        <td><a href="javascript:removeLine(0);">remove</a> <a href="javascript:addLine();">add</a></td>
                    </tr>
                </tbody>
            </table>
            <input type="button" value="gen chart" onClick="sendData();" />
        </form>
        
        <div id="pieChart"></div>
    
    </body>

</html>

JavaScript

/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

var val = {line_num: 1};

function addLine() {
    var table = document.getElementById('lines');
    var lastrow = table.rows.length;
    var row = table.insertRow(lastrow);
    row.setAttribute("id", "itm_"+val.line_num);
    
    var prod_id = row.insertCell(0);
    var id = document.createTextNode(val.line_num+1);
    
    var prod_nome = row.insertCell(1);
    var input_nome = document.createElement("INPUT");
    
    input_nome.type = 'text';
    input_nome.name = 'p_'+val.line_num;
    input_nome.placeholder = 'product name';
    
    prod_nome.appendChild(input_nome);
    
    var prod_range = row.insertCell(2);
    var input_range = document.createElement("INPUT");
    
    input_range.type = 'range';
    input_range.min = '0';
    input_range.max = '100';
    input_range.step = '5';
    input_range.value = '0';
    input_range.name = 'p_num_'+val.line_num;
    input_range.id = 'q_slider_'+val.line_num;
    input_range.setAttribute("onChange", "document.getElementById('q_numeric_"+val.line_num+"').value = this.value");
    
    var prod_num = row.insertCell(3);
    var input_num = document.createElement("INPUT");
    
    input_num.type = 'number';
    input_num.min = '0';
    input_num.max = '100';
    input_num.step = '1';
    input_num.value = '0';
    input_num.id = 'q_numeric_'+val.line_num;
    input_num.setAttribute("onInput", "document.getElementById('q_slider_'"+val.line_num+"').value = this.value;");
    
    var prod_opt = row.insertCell(4);
    var remove = document.createElement('A');
    var add = document.createElement('A');
    
    remove.textContent = 'remove';
    remove.href = "javascript:removeLine('itm_"+val.line_num+"');";
    
    add.textContent = 'add';
    add.href = "javascript:addLine();";
    
    prod_id.appendChild(id);
    prod_range.appendChild(input_range);
    prod_num.appendChild(input_num);
   ...