Why will the scripts on this view not run - asp.net-mvc

Question

I am trying to create an expandable input table and I am running into some issues. Both seem to be related to the fact that the scripts are not running, but I am not sure. None of the buttons are working even though they have in the past. I don't know what changed, but I did not change the add or delete functions but they don't work anymore. The submit button doesn't seem to trigger the corresponding function in the controller.
I have tried looking for syntax errors and there don't seem to be any. The scripts seem to be referencing the correct portion of the view.
Here is the controller:
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Promotion_Generator.Models.DataModels;
namespace Promotion_Generator.Controllers
{
public class PromotionController : Controller
{
private PromotionGeneratorEntities db = new PromotionGeneratorEntities();
public ActionResult BOGO()
{
return View();
}
[HttpPost]
public JsonResult BOGOSave(string BuyMemberData, string GetMemberData)
{
try
{
var BuySerializeData = JsonConvert.DeserializeObject<List<String>>(BuyMemberData);
foreach (var data in BuySerializeData)
{
}
var GetSerializeData = JsonConvert.DeserializeObject<List<String>>(GetMemberData);
foreach (var data in GetSerializeData)
{
}
db.SaveChanges();
}
catch (Exception)
{
return Json("fail");
}
return Json("success");
}
}
}
Here is the View
#model Promotion_Generator.Models.BOGOModel
#{
ViewBag.Title = "BOGO";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2><b>Buy One Get One Free</b></h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
<p class = "control-label col-md-2"><b>Promotion Code</b></p>
<div class="col-md-10">
#Html.EditorFor(model => model.PROMOTION_CODE, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PROMOTION_CODE, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<p class="control-label col-md-2"><b>Description</b></p>
<div class="col-md-10">
#Html.EditorFor(model => model.DESCRIPTION, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.DESCRIPTION, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<p class="control-label col-md-2"><b>Start Date Time</b></p>
<div class="col-md-10">
#Html.EditorFor(model => model.START_DATE_TIME, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.START_DATE_TIME, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<p class="control-label col-md-2"><b>End Date Time</b></p>
<div class="col-md-10">
#Html.EditorFor(model => model.END_DATE_TIME, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.END_DATE_TIME, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<p class="control-label col-md-2"><b>Percent Off</b></p>
<div class="col-md-10">
#Html.EditorFor(model => model.PERCENT_OFF, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PERCENT_OFF, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<p class="control-label col-md-2"><b>Percent Off</b></p>
<div class="col-md-10">
#Html.EditorFor(model => model.BUY_MEMBERS, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PERCENT_OFF, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group col-md-10">
<h3><b>Buy Products</b></h3>
<table id="buyProducts" class="table">
<thread>
<tr>
<th>
<p>Product UPC</p>
</th>
</tr>
</thread>
<tbody>
<tr>
<td>
#Html.EditorFor(modelItem => modelItem.BUY_MEMBERS, new { htmlAttributes = new { #class = "form-control" } })
</td>
<td>
<input type="button" value="Remove" onclick="T1Remove(this)" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input class="btn btn-default" id="btnAdd1" type="button" name="name" value="Add" />
</td>
</tr>
</tfoot>
</table>
</div>
<div class="form-group col-md-10">
<h3><b>Get Products</b></h3>
<table id="getProducts" class="table">
<thread>
<tr>
<th>
<p>Product UPC</p>
</th>
</tr>
</thread>
<tbody>
<tr>
<td>
#Html.EditorFor(modelItem => modelItem.GET_MEMBERS, new { htmlAttributes = new { #class = "form-control" } })
</td>
<td>
<input type="button" value="Remove" onclick="T2Remove(this)" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input class="btn btn-default" id="btnAdd2" type="button" name="name" value="Add" />
</td>
</tr>
</tfoot>
</table>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" id="btnSubmit" value="Submit" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to Home", "Index", "Home")
</div>
#section scripts{
<script>
$(".btnAdd1").click(function () {
//Get the reference of the Table's TBODY element.
var tBody = $("#buyProducts > TBODY")[0];
//Add Row.
var row = tBody.insertRow(-1);
//Add Editor cell.
var cell = $(row.insertCell(-1));
cell.append("#Html.EditorFor(modelItem => modelItem.GET_MEMBERS, new { htmlAttributes = new { #class = "form-control" } })");
//Add Button cell.
cell = $(row.insertCell(-1));
var btnRemove = $("<input />");
btnRemove.attr("type", "button");
btnRemove.attr("onclick", "T1Remove(this);");
btnRemove.val("Remove");
cell.append(btnRemove);
//Clear the TextBoxes.
txtName.val("");
txtCountry.val("");
});
$(".btnAdd2").click(function () {
//Get the reference of the Table's TBODY element.
var tBody = $("#getProducts > TBODY")[0];
//Add Row.
var row = tBody.insertRow(-1);
//Add Editor cell.
var cell = $(row.insertCell(-1));
cell.append("#Html.EditorFor(modelItem => modelItem.GET_MEMBERS, new { htmlAttributes = new { #class = "form-control" } })");
//Add Button cell.
cell = $(row.insertCell(-1));
var btnRemove = $("<input />");
btnRemove.attr("type", "button");
btnRemove.attr("onclick", "T2Remove(this);");
btnRemove.val("Remove");
cell.append(btnRemove);
//Clear the TextBoxes.
txtName.val("");
txtCountry.val("");
});
function T1Remove(button) {
//Determine the reference of the Row using the Button.
var row = $(button).closest("TR");
var name = $("TD", row).eq(0).html();
if (confirm("Do you want to delete: " + name)) {
//Get the reference of the Table.
var table = $("#buyProducts")[0];
//Delete the Table row using it's Index.
table.deleteRow(row[0].rowIndex);
}
};
function T2Remove(button) {
//Determine the reference of the Row using the Button.
var row = $(button).closest("TR");
var name = $("TD", row).eq(0).html();
if (confirm("Do you want to delete: " + name)) {
//Get the reference of the Table.
var table = $("#getProducts")[0];
//Delete the Table row using it's Index.
table.deleteRow(row[0].rowIndex);
}
};
function BuyMembers() {
var BuyMembers = $(this).find('#BuyMembers').val();
return BuyMembers;
};
function GetMembers() {
var GetMembers = $(this).find('#GetMembers').val();
return GetMembers;
};
$('.btnSubmit').click(function () {
$.ajax({
url: '/Promotion/SaveData',
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(BuyMembers),
data: JSON.stringify(GetMembers),
success: function () {
alert("Data Added Successfully");
},
error: function () {
alert("Error while inserting data");
}
});
});
</script>
}
When I hit the Add, Remove, and Submit buttons the script doesn't seem to run and no columns are added or deleted.

Answer 1

You're currently assigning the jQuery events to the classes ($(".btnAdd1")) instead of ids ($("#btnAdd1")). You can either change your events to link to the id values:
$("#btnAdd1").click(function () {
//...
}
$("#btnAdd2").click(function () {
//...
});
$('#btnSubmit').click(function () {
//...
});
or change the inputs to have the classes of the events. This will fix your issue with the click events not triggering.