code working in jfiddle but not in jfiddle result

Question

Here is my jsFiddle HTML:

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<table id="tableone" border="2" cellspacing="2" cellpadding="2">
<thead>
<tr>
<th class="col1">Seminar Name</th>
<th class="col2">Seminar Date</th>
<th class="col3">Download Link</th>
<tbody>
<tr class="del">
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td>
<button class="editbtn">Edit</button>
</td>
</tr>
<tr class="del" id="tablerow">
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td>
<button class="editbtn">Edit</button>
</td>
</tr>
</tbody>
<button class="addnewrow">Add New Row</button>

Javascript:

$('#tableone').on('click', '.editbtn', function() {
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function() {
return $(this).find('.editbtn').length === 0;  
});
if ($this.html() === 'Edit') {
$this.html('Save');
tds.prop('contenteditable', true);
} else {
$this.html('Edit');
tds.prop('contenteditable', false);
}
});
$('.addnewrow').click(function() {
var $tr = $("#tableone").find("tr:last");
var $clone = $tr.clone();
$clone.find('input').val('');
$tr.after($clone);
});

the code works fine in jfiddle but when I go to https://jsfiddle.net/yT92K/42/show/result the "add new row" function has stopped working. Also, when I try to export the file as an individual .html file, it just opens a blank page in my browser (chrome). Does anyone have a fix for this?

$('#tableone').on('click', '.editbtn', function() {
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function() {
return $(this).find('.editbtn').length === 0;
});
if ($this.html() === 'Edit') {
$this.html('Save');
tds.prop('contenteditable', true);
} else {
$this.html('Edit');
tds.prop('contenteditable', false);
}
});
$('.addnewrow').click(function() {
var $tr = $("#tableone").find("tr:last");
var $clone = $tr.clone();
$clone.find('input').val('');
$tr.after($clone);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableone" border="2" cellspacing="2" cellpadding="2">
  <thead>
  <tr>
  <th class="col1">Seminar Name</th>
  <th class="col2">Seminar Date</th>
  <th class="col3">Download Link</th>
  </thead>
  <tbody>
  <tr class="del">
  <td contenteditable="false"></td>
  <td contenteditable="false"></td>
  <td contenteditable="false"></td>
  <td>
  <button class="editbtn">Edit</button>
  </td>
  </tr>
  <tr class="del" id="tablerow">
  <td contenteditable="false"></td>
  <td contenteditable="false"></td>
  <td contenteditable="false"></td>
  <td>
  <button class="editbtn">Edit</button>
  </td>
  </tr>
  </tbody>
  <button class="addnewrow">Add New Row</button>

Answer 1

This is an addition to @zhuravlyoy's answer, since his answer won't make the new row blank if the previous one was edited.

$( document ).ready(function() {
        $('#tableone').on('click', '.editbtn', function() {
            var $this = $(this);
            var tds = $this.closest('tr').find('td').filter(function() {
                return $(this).find('.editbtn').length === 0;
            });
            if ($this.html() === 'Edit') {
                $this.html('Save');
                tds.prop('contenteditable', true);
            } else {
                $this.html('Edit');
                tds.prop('contenteditable', false);
            }
        });
        $('.addnewrow').click(function() {
            var $tr = $("#tableone").find("tr:last");
            var $clone = $tr.clone();
            $clone.children('.td').empty();
            $clone.children('.td').attr('contenteditable', false);
            $clone.find('.editbtn').text('Edit');
            $tr.after($clone);
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableone" border="2" cellspacing="2" cellpadding="2">
  <thead>
    <tr>
      <th class="col1">Seminar Name</th>
      <th class="col2">Seminar Date</th>
      <th class="col3">Download Link</th>
      <tbody>
        <tr class="del">
          <td contenteditable="false" class="td"></td>
          <td contenteditable="false" class="td"></td>
          <td contenteditable="false" class="td"></td>
          <td>
            <button class="editbtn">Edit</button>
          </td>
        </tr>
        <tr class="del" id="tablerow">
          <td contenteditable="false" class="td"></td>
          <td contenteditable="false" class="td"></td>
          <td contenteditable="false" class="td"></td>
          <td>
            <button class="editbtn">Edit</button>
          </td>
        </tr>
      </tbody>
      <button class="addnewrow">Add New Row</button>