Button click function not working for more then one time

Button click function not working for more then one time

Dear All,

I had written the below code to create the element and append to html table ,And it's working for fine for only one time.

Can any one please help me for what reason it's working only for 1 time 

  1. <button onclick="myFunction()">Try it</button>
  2.  <table id="tblCustomListData" border="1" width="100%" style="overflow-x:auto;">
  3.               <thead>
  4.                      <tr class="bgcolorgray">
  5.                         <th>Sno</th>
  6.                         <th >Current DR</th>
  7.                      </tr>
  8.               </thead>
  9.             </table>
  10. </div >
  11. <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
  12. <script type="text/javascript">

  14. function myFunction() {

  16. var txtHTML = "";
  17. $('#tblCustomListData tbody').html('');

  19.      var i="10";

  21.         var button = document.createElement('input');
  22.         button.setAttribute('type', 'text');
  23.         button.setAttribute('value', i);

  25.       var tr = $('<tr>');

  27.           var td = $('<td>');
  28.           td.append(button);
  29.           tr.append(td);

  31.           var td = $('<td>');
  32.           td.append(i);
  33.           tr.append(td);
  34.           $('</tr>');

  36.      $("#tblCustomListData").append(tr);

  38. }

  40. </script>


  43. </body>
  44. </html>


Thanks
Learner.