javascript jquery css drag-and-drop draggable

input text is being displayed double in divs

can someone please help me? i have been trying for days but this has not been working properly my problem is that when i try to enter some text it is being displayed double one in each div if you need further explanation please ask. try typing something and you will see what im talking about when i edit them one of them changes color and the other size and font the reason is because the class are different each div has a different class on purpose this is the site http://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">

Solution

This is the code that will give you ONE at a time. The working-independently thing isn't sorted yet, but I think it deserves an upvote!

var z = 1; //value to make div overlappable
var i = 0;
$('#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);
      }
    }
  });
  i++;
});

$(document).on("dblclick", '.text', function() {
  $(this).hide();
  $(this).closest('.item').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('.item').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());
  $('.item').css("font-family", $(this).val());

});

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


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

<style> .item,
.item1 {
  width: 200px;
  height: 50px;
  float: left;
  padding: 0.5em;
  background: transparent;
  z-index: 1;
}

textarea {
  float: left;
  display: block;
  margin-top: 20px;
  margin-bottom: 30px;
  margin-right: 80%;
}

.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><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">

<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="item">
  <textarea data-bind="value:textContent1" 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="item" data-bind="draggable:true,droppable:true">
      <span data-bind="click:$parent.remove">X</span>
      <br/>
      <br/>
      <center>
        <span class="text i" data-bind="text:$data"></span>
        <input class="edit_text" />
      </center>
    </div>

  </div>
</div>