input[type=color] not working when add into HTML using JS

[JulesKzl]

On Chrome, both input[type=color] are working since they use the Chrome default input color. But in Safari, only the color1 is working. When the button is pressed, the input[type=color] color2 is a text input.

HTML

<input type='color' name='color1' value='#3355cc' />

<button id="addColorInput">Add Color Input</button>
<div id="myDiv"></div>

Javascript

$("#addColorInput")
  .on('click', function (){
  var $div = $( "#myDiv");
  $div.empty()
  htmlToPrint = "<input type='color' name='color2 ' value='#3355cc' />"
  $(htmlToPrint).appendTo($div);
})

JSFiddle : http://jsfiddle.net/hnt7fz4s/1/