jquery dynamically adds text elements and deletes textual content instance code

This code is dynamically adding a limited amount of text via jquery (5 in this case), and clearing the text content, using the After () method to append the element.
<!--The following is the start of the script code-->

Copy Code code as follows:


&lt;script&gt;


$ (document). Ready (function () {


var Spotmax = 5;//Limit the total number of add text elements


var Afterid = 0;//The ID of the element to append


var newid=1;//the ID of the newly generated text


if ($ (' table#vote '). Size () &gt;= Spotmax) {}


$ ("#btnAddOption"). Click (function () {


afterid++;


newid=afterid+1;


Addspot (this, spotmax,afterid,newid);


});


});


//Add Option Method


function Addspot (obj, sm,afterid,newid) {


if ($ (' tr.spot '). Size () &lt; SM) {


$ (' #vote_ ' +afterid). After (


' &lt;tr id= ' vote_ ' +newid+ ' class= ' spot ' &gt;&lt;th&gt; ' +afterid+ ' &lt;/th&gt; ' +


' &lt;td&gt;&lt;input type= ' text "id=" Txtinput_ ' +afterid+ ' "class=" Input-text "value=" "size=" name= &lt;/td&gt; ' +


' &lt;/tr&gt; ');


$ (": text[id^= ' Txtinput_ ')"). Val ("Enter text ...");//give the new text the initial value


}


else{


alert ("can only add 5 votes!") ");


}


};


//Reset Options


$ ("Input#btnresetoption"). Click (function () {


$ (": text[id^= ' Txtinput_ ')"). Val ("");/Empty text content


});


&lt;/script&gt;

<!--The following is the end of the script code-->
<!--The following is the beginning of the HTML code block-->

Copy Code code as follows:


&lt;form method= ' post ' id= "UpdateForm" action= "Admin/vote/dovote" &gt;


&lt;table cellpadding=0 cellspacing=0 width= "100%" class= "Table_form" &gt;


&lt;tr&gt;


&lt;th width= "140" &gt; Voting name &lt;/th&gt;


&lt;td&gt;


&lt;input type= "text" id= "txtname" name= "name" class= "Input-text" value= "" size=/&gt; "


&lt;/td&gt;


&lt;/tr&gt;


&lt;tr&gt;


&lt;th width= "140" &gt; Voting description &lt;/th&gt;


&lt;td&gt;


&lt;textarea id= "Txtdescribe" class= "Input-text" name= "remark" cols= "&gt;&lt;/textarea&gt;
"

&lt;/td&gt;


&lt;/tr&gt;


&lt;tr&gt;


&lt;th width= "140" &gt; Start time &lt;/th&gt;


&lt;td&gt;


&lt;input type= "text" id= "Datemin" class= "Input-text" value= "" Name= "StartDate" size= "" readonly= "ReadOnly" &gt;


&lt;/td&gt;


&lt;/tr&gt;


&lt;tr&gt;


&lt;th width= "140" &gt; End time &lt;/th&gt;


&lt;td&gt;


&lt;input type= "text" id= "Datemax" class= "Input-text" name= "EndDate" "size=" readonly= "readonly"/&gt;


&lt;/td&gt;


&lt;/tr&gt;


&lt;tr&gt;


&lt;th width= "140" &gt; Whether multiple selections &lt;/th&gt;


&lt;td&gt;


&lt;input type= "Radio" id= "Txtendtime" name= "Isselect" value= "0" size= ""/&gt; Radio


&lt;input type= "Radio" id= "Txtendtime" name= "Isselect" value= "1" size= "a"/&gt; Multiple selection


&lt;/td&gt;


&lt;/tr&gt;


&lt;tr id= "Vote_1" &gt;


&lt;th width= "140" &gt; Voting options &lt;/th&gt;


&lt;td&gt;


&lt;input type= "button" id= "Btnaddoption" name= "btnaddoption" class= "button" value= "Add Options"/&gt;


&lt;input type= "reset" id= "btnresetoption" name= "btnresetoption" class= "button" value= "Reset Options"/&gt;


&lt;/td&gt;


&lt;/tr&gt;


&lt;tr id= "Save" &gt;


&lt;th&gt;&lt;/th&gt;


&lt;td align= "left" &gt;


&lt;input type= "Submit" id= "Btnsave" name= "btnsave" class= "button" style= "width:50px" value= "Save"/&gt;


&lt;input type= "Submit" id= "Btnclose" name= "btnclose" class= "button" style= "width:50px" value= "Cancel"/&gt;


&lt;/td&gt;


&lt;/tr&gt;


&lt;/table&gt;


&lt;/form&gt;

<!--The following is the beginning of the HTML code block-->
The following are the effects of the operation: