js jquery

<html>
<head>
</head>
<body>
<form id="myForm">
    <div id='TextBoxesGroup'>
        <div id="nmKorban1">
            <input type="text" class="col-xs-12 col-sm-6"  name="nmKorban1" placeholder="Nama Korban"></input>
        </div>
    </div>
    <input type='button' value='Add Button' id='addButton'>
    <input type='button' value='Remove Button' id='removeButton'>
    <a href='' id='sub'>asda</a>
</form>


<script src="jquery.js"></script>
<script type="text/javascript">
            $(document).ready(function(){

                var counter = 2;
                var a = $(this).attr('name');

                $("#addButton").click(function () {

                if(counter>10){
                        alert("Only 10 textboxes allow");
                        return false;
                }

                var newTextBoxDiv = $(document.createElement('div'))
                     .attr("id", 'nmKorban' + counter);

                newTextBoxDiv.after().html('<br><br>'+
                      '<input type="text" class="col-sm-6" name="nmKorban' + counter +
                      '" id="nmKorban' + counter + '" value="" placeholder="Nama Korban">');

                newTextBoxDiv.appendTo("#TextBoxesGroup");


                counter++;
                 });

                 $("#removeButton").click(function () {
                if(counter==2){
                      alert("No more textbox to remove");
                      return false;
                   }

                counter--;

                    $("#nmKorban" + counter).remove();

                 });
                $('#sub').click(function(e){
                    e.preventDefault();
                    var data = $('#myForm').serialize();
                    //var i = $(this).attr('id');
                    console.log(data);
                });
              });
        </script>
</body>
</html>