Form Submits After Dynamically Adding Form Element

I'm relatively new to programming and am new to this site, please bear with any simple errors I make in describing this problem.

I am using python to implement a web app with Google App Engine and am using jinja2 to render my HTML templates.

I have included some jquery in my base.html template to allow for the user to dynamically add input boxes to a form. Whenever a set of input boxes is added, they flickers upon the page and it seems as if the form in question submits to the server (a query string with the names of the input boxes [including the ones just added] appears in the url). Afterwards, a blank page is rendered in the browser.

I am not sure how to troubleshoot this problem. I am guessing that it has something to do with my GET and POST functions being improperly formatted, but am not sure how to proceed. I have included the relevant jquery, html, GAE handler, and relevant function definitions. Any insight would be appreciated on potential solutions or suggestions for troubleshooting.

Here is the jquery:

$(document).ready(function() {
  $('#btnAdd').click(function() {
    var num     = $('.clonedInput').length;
    var newNum  = new Number(num + 1);

    var newElemName = $('#inputName' + num).clone().prop('id', 'inputName' + newNum);
    var newElemValue = $('#inputValue' + num).clone().prop('id', 'inputValue' + newNum);

    newElemName.children(':first').prop('id', 'name' + newNum).prop('name', 'name' + newNum);
    newElemValue.children(':first').prop('id', 'value' + newNum).prop('name', 'value' + newNum);

    $('#inputValue' + num).after(newElemName);
    $(newElemName).after(newElemValue);
    $('#btnDel').removeAttr('disabled');

    if (newNum == 13) {
        $('#btnAdd').prop('disabled', true);
    };
  });

  $('#btnDel').click(function() {
    var num = $('.clonedInput').length;

    $('#inputName' + num).remove();
    $('#inputValue' + num).remove();
    $('#btnAdd').removeAttr('disabled');

    if (num-1 == 1) {
      $('#btnDel').prop('disabled', true);
    };
  });

    $('#btnDel').attr('disabled', true);
});

Here is the form's markup:

<form class="well form-inline" method="post">
  <legend>custom post</legend>
  <button class="btn" id='btnAdd'>add another row</button> 
  <button class="btn" id='btnDel'>remove row</button>            
    <fieldset>
      <div id='inputName1' class='clonedInput'>
        <input type="text" class="input-xlarge" id="name1" placeholder="name" name="name1" value="{{name1}}">
      </div>
      <div id='inputValue1' class='clonedInput1'>
        <input type="text" class="input-xlarge" id="value1" placeholder="value" name="value1" value="{{value1}}">
      </div>
      <p class="help-block">enter your custom name and value, please.</p>
    </fieldset>
  <input type="submit">
</form>

And here is my GAE handler and the relevant function definitions (incomplete, I haven't implemented the majority of the post function yet):

class Create(Handler):
    def get(self):
        if not self.getCookieVal('user_id'):
            self.redirect('/register/')
        self.render('create.html', userCookie=User.by_id(int(self.getCookieVal('user_id'))).username)

    def post(self):
        if not self.getCookieVal('user_id'):
            self.redirect('/register/')

def write(self, *a, **kw):
    self.response.out.write(*a, **kw)

def render_str(self, template, **params):
    return render_str(template, **params)

def render(self, template, **kw):
    self.write(self.render_str(template, **kw))

def getCookieVal(self, name):
    cookieVal = self.request.cookies.get(name)
    if cookieVal:
        return verification.checkSecureVal(cookieVal)  #returns string if value is secure