Notes

<table class="table table-bordered table-hover table-striped form-inline" id="experienceTable2">
<thead style="background-color:lightgray;">
<tr>
<th>
Exp Type
</th>
<th>
Organization Name
</th>
<!-- Add other table headers here -->
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.expType</td>
<td>@item.name_org</td>
<!-- Render other table cells here -->
</tr>
}
</tbody>
</table>

public ActionResult Details()
{
// Retrieve the form data list from TempData
List<YourModel> formDataList = TempData["FormDataList"] as List<YourModel>;

// Pass the formDataList to the view
return View(formDataList);
}

[HttpPost]
public ActionResult MainApplication(YourModel model)
{
// Assuming YourModel contains properties corresponding to form fields
// Example: model.expType, model.name_org, model.designation, etc.

// Store the form data in a list or any other suitable data structure
List<YourModel> formDataList = TempData["FormDataList"] as List<YourModel>;
if (formDataList == null)
{
formDataList = new List<YourModel>();
}

formDataList.Add(model);

TempData["FormDataList"] = formDataList;

// Redirect to the same or another view where you want to display the second table
return RedirectToAction("Details");
}

function Validate1() {
// Perform validation if needed

// Get values from form fields
var expType = document.getElementById("ExpType").value;
var org = document.getElementById("org").value;
var designation = document.getElementById("Designation").value;
var fromDate = document.getElementById("txtFromDate").value;
var toDate = document.getElementById("txtToDate").value;
var description = document.getElementById("Description").value;

// Create a new row in the second table
var table = document.getElementById("experienceTable2").getElementsByTagName('tbody')[0];
var newRow = table.insertRow(table.rows.length);

// Insert cells into the new row and populate them with the form values
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
var cell5 = newRow.insertCell(4);
var cell6 = newRow.insertCell(5);
var cell7 = newRow.insertCell(6);
var cell8 = newRow.insertCell(7);

cell1.innerHTML = expType;
cell2.innerHTML = org;
cell3.innerHTML = designation;
cell4.innerHTML = fromDate;
cell5.innerHTML = toDate;
cell6.innerHTML = description;
// Add duration calculation logic here if needed
// Example: var duration = calculateDuration(fromDate, toDate);
// cell7.innerHTML = duration;

// Optionally clear the form fields after adding the data
document.getElementById("ExpType").value = "";
document.getElementById("org").value = "";
document.getElementById("Designation").value = "";
document.getElementById("txtFromDate").value = "";
document.getElementById("txtToDate").value = "";
document.getElementById("Description").value = "";

return false; // Prevent form submission
}