根据onclick点击事件发生次数，显示在表格相应区域

.box{
  width: 100px;
   margin: 0 auto;
}
    td {
        height: 20px;
    }
    button{
        display: block;
        margin: auto;
    }
    .inp{
        margin: 5px;
        display: inline-block;
    }
</style>


    <!-- 下拉表单 -->
    <div class="kind">
        <label for="kind">种类:</label>
    <select name="mySelect" id="kind">
        <option value="apple">苹果</option>
        <option value="pear">梨</option>
        <option value="banner">香蕉</option>
    </select>
</div>
    <!-- 单价 -->
    <div class="inp">
        <label for="price">单价:</label>
    <input type="text" name="" id="price">
    </div>
    <!-- 数量 -->
   <div class="inp">
    <label for="num">数量:</label>
    <input type="text" name="" id="num">
   </div>
    <!-- 显示区域——表格 -->
    <table border="1" cellspacing="0" cellpadding="单元格边距(不加单位)">
        <thead>
            <tr>
                <td>种类</td>
                <td>单价</td>
                <td>数量</td>
                <td>总价</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td id="Kind1"></td>
                <td id="UnitPrice1"></td>
                <td id="amount1"></td>
                <td id="TotalPrice1"></td>
            </tr>
            <tr>
                <td id="Kind2"></td>
                <td id="UnitPrice2"></td>
                <td id="amount2"></td>
                <td id="TotalPrice2"></td>
            </tr>
            <tr>
                <td id="Kind3"></td>
                <td id="UnitPrice3"></td>
                <td id="amount3"></td>
                <td id="TotalPrice3"></td>
            </tr>
            
        </tbody>
    </table>
    <!-- 确认 -->
    <button id="btn" onclick=total()>确认</button>
    <div id="box"></div>
    <script>
        var onc = {
            a:0
        }
        console.log(Array.isArray(onc))
        // function total( ) {
        //     onc++;
        //         var Kind = document.getElementById('kind').value;
        //         // 显示到表格中
        //         document.getElementById('Kind'+ onc).innerHTML = Kind
        //         var num = document.getElementById('num').value;
        //         document.getElementById('amount' + onc).innerHTML = num
        //         // 单价
        //         var UnitPrice = document.getElementById('price').value;
        //         document.getElementById('UnitPrice' + onc).innerHTML = UnitPrice
        //         //总价
        //         var total = UnitPrice * num
        //         document.getElementById('TotalPrice'+onc).innerHTML = total
        //         document.getElementById('box').innerHTML = ("您点击了我" + onc + "次");
        //     }
        
    </script>

1.通过变量on
2.使随着点击次数的变化使着相应内容显示到相应区域
3.完成目的
代码有很多需改善地方 ps:是否有相同种类做出判断，有相同种类就覆盖原有信息，望大神指点一二