jquery mobile dynamically add element doesnt work correctly

I want to add li tag dynamically.
Event though add

listview("refresh");

It doesn't seem to apply jquery mobile css. I tried

listview().listview("refresh");

below code is what I wrote. please save below code as tmp.html and try on your localhost.

In my environment, there is no error while push ADD btn.

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  $(document).bind('mobileinit', function() {
    $.mobile.changePage.defaults.changeHash = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;
  });
</script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
  function onAddBtn() {
    $li = $('<li><p>a:</p><input type="text"><p>b:</p><input type="text"></li>');
    $("#SentenceList").append($li).listview("refresh");
  }

  function onReady() {
    $("#AddBtn").click(onAddBtn);
  }

  $(onReady);
</script>
<div data-role="page" id="AddPage">
  <header data-role="header" data-position="fixed" data-theme="b">
    <a data-role="button" data-rel="back" data-icon="back" style="background-color: gray;">Back</a>
    <h1>Add Memo</h1>
  </header>
  <section data-role="content">
    <ul id="SentenceList" data-role="listview">
      <li>
        <p>a:</p>
        <input type="text">
        <p>b:</p>
        <input type="text">
      </li>
      <li>
        <p>a:</p>
        <input type="text">
        <p>b:</p>
        <input type="text">
      </li>
    </ul>
  </section>
  <a data-role="button" data-icon="plus" id="AddBtn">ADD</a>
</div>