Alguém por favor pode me ajudar? Eu tenho tentado por dias, mas isso não tem funcionado corretamente meu problema é que, quando tento inserir algum texto, ele está sendo exibido duas vezes em cada div, se você precisar de mais explicações, pergunte. tente digitar algo e você verá o que estou falando quando eu os edito, um deles muda de cor e o outro tamanho e fonte, o motivo é porque a classe é diferente, cada div tem uma classe diferente de propósito, este é o sitehttp://amp.site88.net/

var z = 1; //value to make div overlappable

$('#addText').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'ui-widget-content',
        appendTo: '.container',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    });
});

$(document).on("dblclick", '.text', function()
{
    $(this).hide();    $(this).closest('.item1').find('.edit_text').val($(this).text()).show();
});

$(document).on("click", ".edit_text", function()
{
    return false;
});


$(document).on("click", function()
{
    var editingText = $('.edit_text:visible');
    if (editingText.length)
    {
        editingText.hide();
        editingText.closest('.item1').find('.text').text($(editingText).val()).show();
    }
});

ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).draggable();
    }
};



var z = 1; //value to make div overlappable

$('#addText').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'ui-widget-content',
        appendTo: '.container',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    });
});

$(document).on("dblclick", '.text', function()
{
    $(this).hide();    $(this).closest('.item2').find('.edit_text1').val($(this).text()).show();
});

$(document).on("click", ".edit_text1", function()
{
    return false;
});


$(document).on("click", function()
{
    var editingText = $('.edit_text1:visible');
    if (editingText.length)
    {
        editingText.hide();
        editingText.closest('.item2').find('.text').text($(editingText).val()).show();
    }
});

ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).draggable();
    }
};

var vm = function() {
  var self=this;
  self.items=ko.observableArray();
  self.textContent1 = ko.observable('');
  self.textContent2 = ko.observable('');
  self.textContent3 = ko.observable('');
  self.init = function() {
    self.items([]);
  }
  self.remove = function(item) {
    console.log(item);
    self.items.remove(item);
 }
 self.addNew = function() {
  var content = [ 
    self.textContent1(), 
    self.textContent2(), 
    self.textContent3()
  ].filter(function(item) {
    return item !== ''
  });
  content.forEach(function(item) { self.items.push(item); })
  self.textContent1('');
  self.textContent2('');
  self.textContent3('');
  }
}

ko.applyBindings(new vm());

$("#fs").change(function() {
    //alert($(this).val());
    $('.item1').css("font-family", $(this).val());

});

$("#size").change(function() {
    $('.item1').css("font-size", $(this).val() + "px");
});


$('.foo').click(function(){
    $('.item2').css("color", $(this).attr('data-color'));
});

<style>.item{
    width: 200px;
    height: 200px;
    padding: 0.5em;
    background:transparent;
    z-index: 1;
    display:block;
}

.edit_text
{
    display: none;
}
.edit_text1
{
    display: none;
}
.fix_backround
{
    background-color: transparent;
}

.container {
    width: 500px;
    height: 500px;
    border: 2px solid;
    position: relative;
    overflow: auto;
}
</style><style>
.thumbs img{
  margin:3px;
  width:50px;
  float:left;
}</style>
<style>
.bottlesWrapper img{
  margin:3px;
  width:400px;
  float:left;
}</style>
<style>#main { border:1px solid #eee; margin:20px; width:410px; height:220px;}
</style>
<style type="text/css" media="screen">
    .transparent { background:transparent }
</style>

<style>.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.white {
  background: #FFFFFF;
}
.yellow {
  background: #FAFF38;
}
.orange {
  background: #FFA200;
}

.red {
  background: #FF0000;
}
.dorange {
  background: #FF5500;
}
.lgreen {
  background: #80FF00;
}

.green {
  background: #45C731;
}

.turk {
  background: #17DDBC;
}
.lblue {
  background: #00A2FF;
}.blue {
  background: #1713F6;
}.purple {
  background: #AB09D3;
}.black {
  background: #000000;
}

</style><style>   #mainTarget{
    width:30px; 
    height:20px; 
    position:relative;
    top:100px; 
    left:25%
}

.mainTarget{position:absolute; width:25px; height:25px;}

#target{
    position:absolute;
    height:25px;
    width:25px;
    background:url(http://files.softicons.com/download/system-icons/human-o2-icons-by-oliver-scholtz/png/128x128/actions/object-rotate-left.png) no-repeat top center #ffffff;
    background-size:100%;
    cursor:pointer; 
    z-index:1; 
    top:1; 
    right:1;    
}
</style>

<form method="post" action="<?php echo $PHP_SELF;?>">


<div id="colour" >
  <div class="foo white" data-color="#FFFFFF"></div>
  <div class="foo black" data-color="#000000"></div>
  <div class="foo yellow" data-color="#FAFF38"></div>
  <div class="foo orange" data-color="#FFA200"></div>
  <div class="foo red" data-color="#FF0000"></div>
  <div class="foo dorange" data-color="#FF5500"></div>
  <div class="foo lgreen" data-color="#80FF00"></div>
  <div class="foo green" data-color="#45C731"></div>
  <div class="foo turk" data-color="#17DDBC"></div>
  <div class="foo lblue" data-color="#00A2ff"></div>
  <div class="foo blue" data-color="#1713F6"></div>
  <div class="foo purple" data-color="#AB09D3"></div>
</div>
    <select id="fs"> 
        <option value="Agency FB">Agency FB</option>
        <option value="Algerian">Algerian</option>
        <option value="AR Berkley">AR Berkley</option>
        <option value="AR Blanca">AR Blanca</option>
        <option value="AR Bonnie">AR Bonnie</option>
        <option value="AR Carter">AR Carter</option>
        <option value="AR Cena">AR Cena</option>

    </select>

    <select id="size">
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>


    </select>





 </form>
 <div class="item1">
  <textarea  data-bind="value: textContent1" Placeholder="Type text to append"></textarea>
</div>

<div class="item2">
  <textarea data-bind="value: textContent2" Placeholder="Type text to append"></textarea>
</div>

<button data-bind="click: addNew">Generate New Div</button>

<div class="container">
  <div data-bind="foreach:items" class="fix_backround">

    <div href="#" class="item1" data-bind="draggable:true,droppable:true">
      <span data-bind="click:$parent.remove">X</span>
      <br/>
      <br/>
      <center>
        <span class="text" data-bind="text:$data"></span><input class="edit_text"/>
      </center>
    </div>



   <div href="#" class="item2" data-bind="draggable:true,droppable:true">
      <span data-bind="click:$parent.remove">X</span>
      <br/>
      <br/>
      <center>
        <span class="text" data-bind="text:$data"></span><input class="edit_text1"/>
      </center>
    </div>

  </div> 
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script  
 src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script><link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet"
 href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css">