How to make a new field in table when user clicks

I have form which goes like this as below in picture:

In order to insert data from this form into table I coded this:

// supplier info
$supplier_name = $_POST['supplier_name'];
$supplier_sending = $_POST['supplier_sending'];
$supplier_guarantee = $_POST['supplier_guarantee'];
$supplier_price = $_POST['supplier_price'];
$supplier_colors = $_POST['supplier_colors'];
$supplier_info = array($supplier_name, 
$supplier_sending,$supplier_guarantee, $supplier_price, $supplier_colors);
$proSupply = json_encode($supplier_info);

By this way I can submit the $proSupply var successfully into my table. But as you can see in the print screen, I have added a link which is named Add more suppliers: + and what it does it basically adds a new table row to the form. So users can insert multiple supplier information.

But the problem is there is only one field at my table which should contain the Supplier Info. And because I don't know how many supplier a user wants to add, I can not specify the amount of supplier filed in MySQL table.

So my question is: Is there any way to make a new custom field in table, whenever user clicks on the + link (For example supplier_info_1, supplier_info_2 & etc) within PHP ?

UPDATE 1:

This is the Script that provides a new row for my table form.

<script>
        $("#addbtn").click(function(){
            var next = parseInt($('#counter').val()) + 1;
            $("#group").append("<table class='table table-hover'>
                                 <tr>
                                     <th style='padding-left:10px'>Name of supplier ("+next+")</th>
                                     <th>Terms of sending</th>
                                     <th>Guarantee</th>
                                     <th>Price</th>
                                     <th>Colors (use , for separation)</th>
                                 </tr>
                                 <tr>
                                     <td style='padding-left:10px'><input name='supplier_name_("+next+")' type='text'></input></td>
                                     <td><input name='supplier_sending_("+next+")' type='text'></input></td>
                                     <td><input name='supplier_guarantee_("+next+")' type='text'></input></td>
                                     <td><input name='supplier_price_("+next+")' type='text'></input></td>
                                     <td><input name='supplier_colors_("+next+")' type='text'></input></td>
                                 </tr>
                                </table>");
            $('#counter').val(next);
        });
        </script>

yes, i have a similar concept in my inventory and accounting software. you can use javascript or more preferably jquery to handle that. you can create a hidden row for a supplier. when an event is triggered base on your application, then a copy would be created to get another supplier row.