AddRemove Function

by Apple Ilagan

HTML

<span class="shows_price" id='TextBoxesGroup'>
<div id="TextBoxDiv1">
                    <label style="float: none;"> Bus Model &nbsp;&nbsp;&nbsp;
                    <input style="width: 150px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]" name="numsValid" id="numsValid">
                    <img src="images/india_rupess.png" style="margin-left:18px;"> :</label>
                    <input style="width: 150px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]" name="numsValid" id="numsValid">
                    <label style="float: none;margin-left: 16px;"><span class="font-dollar">﹩</span>&nbsp; :</label>
                    <input style="width: 150px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]" name="numsValid" id="numsValid">
                    &nbsp;&nbsp;<a href="javascript:;" id="addButton">Add</a>&nbsp;&nbsp;<a href="javascript:;" id="removeButton">Remove</a>
                        </div></span>

JavaScript

$(document).ready(function(){ 
var counter = 2;
    $("#addButton").click(function () {
     alert('test');
    //var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
   alert(counter);
        
        $("#TextBoxesGroup").append('<div id="TextBoxDiv'  + counter +   '" class="textadd""><label style="float: none;"> Bus Model &nbsp;&nbsp;&nbsp;<input style="width: 150px;margin-left:3px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]" name="bus' + counter +   '" id="numsValid"><img src="images/india_rupess.png" style="margin-left:21px;"> :</label><input style="width: 150px;margin-left:3px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]"  name="rs' + counter +   '" id="numsValid"><label style="float: none;margin-left: 19px;"><span class="font-dollar">﹩</span>&nbsp; :</label><input style="width: 150px;margin-left:2px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]"  name="dollar' + counter + '" id="numsValid">&nbsp;&nbsp;<a class="removeButton" href="javascript:;" onClick="javascript:alert("test");" >Remove</a></div>');
 
	counter++;;
 });
 

//});

    $("#TextBoxesGroup").on('click', '.removeButton', function(){
        $(this).closest('div').remove();
alert(counter);        
    });
    
 
    $("#removeButton").click(function () {
		alert('test');
	if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   
	counter--;
       $("#TextBoxDiv" + counter).remove();
     });
    
});