*I am currently facing an issue with adding and removing input textboxes for a CV form using ASP.NET in a master page. Whenever I click on the icon, it doesn't seem to work as intended. The idea is to have a textbox and an icon "+" to add more textboxes. Clicking on the icon should duplicate the textbox input. Additionally, there should be another icon to remove the extra textboxes.
It's important to note that I'm not utilizing MVC for this task. If there are alternative ways to achieve this functionality through coding, your insights would be greatly appreciated.
Below is a snippet of my code:
enter code here
(this includes JavaScript, CSS, and HTML)
$(document).ready(function () {
var counter = 2;
$("#addButton").click(function () {
if (counter > 10) {
alert("Only 10 textboxes allowed");
return false;
}
var newTextBoxDiv = $(document.createElement('span'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().aspx('Textbox' + counter +
'<input type="text" name="courseName' + counter +
'" id="courseId' + counter + '" value="" >');
newTextBoxDiv.appendTo("#course");
counter++;
});
$("#removeButton").click(function () {
if (counter == 1) {
alert("No more textboxes to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#sumbitcvId").click(function () {
var msg = '';
for (i = 1; i < counter; i++) {
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});.coursecv,.mosdcv {
font-family: 'Assistant', sans-serif;
padding: 10px;
margin: 10px;
width: 27.5%;
position: relative;
font-size: 14px;
color: #555;
background-color: #fff;
border: 1px solid #ccc;
display: inline-block;
} <div id="course">
<div>
<h1>course</h1>
</div>
<span id="TextBoxDiv">
<asp:TextBox ID="courseId" runat="server" name="courseName" type="Text" placeholder="course name" CssClass="coursecv" value="" required="required"></asp:TextBox>
</span>
<span>
<asp:TextBox ID="mosdId" runat="server" name="mosdName" type="Text" placeholder="Corporation" CssClass="mosdcv" required="required"></asp:TextBox>
</span>
</div>
<div Id="ADD" style="margin-left:87%;color: #3c6bf4;font-family: 'Assistant', sans-serif;font-size: 17px;">
<a href="javascript:void(0);" class="addButton" title="Add field"><i class="fas fa-plus-circle"></i></a>
<a href="javascript:void(0);" class="removeButton" title="Remove field"><i class="fas fa-minus-circle"></i></a>
</div>