jsfiddle：相同的代码在同一个浏览器上有不同的结果

Question

  

这显示了工作的jfiddle（点击颜色选择器）
  http://jsfiddle.net/xztoqtd7/

  

这显示了非工作的jfiddle（点击颜色选择器）
  http://jsfiddle.net/p7dm051z/

它们都应该改变第二行单元格的颜色，但只有其中一个会这样做。代码：

HTML

<table>
  <tr>
  <td>
    <input type="color" id="colorpicker1" />
  </td>
  <td>
    <input type="color" id="colorpicker2" />
  </td>
  </tr>
  <tr>
    <td id="one">ipsum</td>
    <td id="two">lorem</td>
  </tr>
</table>

CSS

table {
  border-collapse: collapse;
  background: #000;
  border-top: 1px solid #777;
  border-left: 1px solid #777;
}

table tr td {
  border-right: 1px solid #777;
  border-bottom: 1px solid #777;
  color: #fff;
  text-align: center;
}

input {
  border: 0;
  padding: 0;
  margin: 0;
}

JS

$("#colorpicker1").on("change", function() {
  $("#one").css("color", $("#colorpicker1").val());
});

$("#colorpicker2").on("change", function() {
  $("#two").css("color", $("#colorpicker2").val());
});

为什么结果不同？