Here I am trying to add and remove textboxes dynamically in my html. The textboxes are addes successfully but my remove function is not working 

Please tell me why this function is not working 

```
  var counter = 2;
    $(document).ready(function () {

    $("#addButton").click(function () {
        if (counter > 5) {
            alert("Limit Exceeds");
            return false;
        }
        var $wrap = $('#TextBoxesGroup');
        var dynamichtml = '<div class="mcity"><label> Leaving from</label><input type="text" name="textbox' + counter + '" id="textbox' + counter + '" class="auto"/>  </div><div class="mcity"> <label> Going to</label>  <input type="text" name="textbox' + counter + '" id="textbox' + counter + 1 + '" class="auto"/> </div><div class="mcity"> <label> Going to</label>  <input type="text" name="textbox' + counter + '" id="textbox' + counter + 11 + '" class="auto"/> </div>';
        $wrap.append(dynamichtml);
        counter++;
    });

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

        counter--;
        $("#TextBoxesGroup").find("#divleft_" + counter).remove();
        $("#TextBoxesGroup").find("#divright_" + counter).remove();

    });

```