How send two tables fields to DB with one submission?

I need to let user select crops type and typing how many crops of this type in small table, when user fills first table , he/she can press in '+' button to add another table with same fields(crops type and how many crops of crops of this type) after that he/she will press submit button to save both tables fields in the database (all crops types and count of each one), I created view that contains select options and when user press '+' , it will call js function to insert another table, Unfortunately it added to the list just first table fields , I decided to add each fields of tables that user added to list and send it to DB , but still the same issue, I tested the content of the list before send it to DB and it contains just one element.

<p>Region 1 </p>
<table  style="margin-top:-18%;margin-right:3%;color:black;"> 
 <a style="font-size:16px;float:right;cursor: pointer;color: black; " onClick="AddCrops2InReg(1)"><leble class="AddRowStyle">+</leble>Add </a>
    <div class="col-md-10">
    @Html.HiddenFor(model => model.Region , new { @Value = "1"} )
    <tr>
        <td><lable style="font-size:14px;margin-right: 5px;"> CropType </lable> </td>
        <td>
            <select size="1" name="cropType" id="cropType">
                <option selected="selected" value="1">crop1 </option>
                <option value="2">crop2</option>
            </select>
        </td>
    </tr>
    <tr style="background-color:#d0d6d3">
        <td><lable style="font-size:14px"> How many crop? </lable></td>
        <td>
            <div class="col-md-10">
            @Html.EditorFor(model => model.counting, new { htmlAttributes = new { @class = "form-control" } })
            </div>
            <a style="font-size:16px;float:left;cursor: pointer;margin-right:5px;margin-top:4% " onClick=""><span style="color:gray;font-size:14px;" class="fas fa-cog"></span></a>
        </td>
    </tr>
</table>

The JS function :

 function AddMoreCrops(number) {
        var table2 = document.getElementById("CropsTypeTable1" + number);
        var row = table2.insertRow(0);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var row2 = table2.insertRow(1);
        var cell3 = row2.insertCell(0);
        var cell4 = row2.insertCell(1);
        cell1.innerHTML = " CropType: ";
        cell2.innerHTML = "<select size="1" name='cropType' id='cropType'><option selected='selected' value='1'>crop1 </option><option value='2'>crop2</option></select><a style='font-size: 16px; float: left; cursor: pointer;margin-right:5px;margin-top:4%' onClick='SomeDeleteRowFunction(this, " + number + ")'><span style='color:red;font-size: 14px;' class='fas fa-trash-alt'></span></a>";

        cell3.innerHTML = "How many crop?";
        row2.style.backgroundColor = "#d0d6d3";
        cell4.innerHTML = " <input class='inputtcounting'   /><a style='font-size:16px;float:left; cursor:pointer;margin-right:5px;margin-top:4%' onClick='' ><span style='color:gray;font-size:14px;' class='fas fa-cog'></span></a>";

    };

The Action Method :

public ActionResult Create([Bind(Include = "Id,Crops_Type,Region,counting")] Crops_Cert crops_Cert)
{
    if (ModelState.IsValid)
    {        
        var cropType = Request.Form.Get("cropType");
        List<string> AllcropType = new List<string>();
        AllcropType.Add(cropType);
        db.Crops_Cert.Add(crops_Cert);
        db.SaveChanges();
        return RedirectToAction("Create");
    }
    return View(crops_Cert);
}