title: Adding Dynamic Javascript with jQuery stops previously added from functioning
body: <p>I have a script that adds an draggable element to a form.</p>
  
  <p>This works really well until I add another - plus its script - and then the previous on just stops responding. Both scripts are present in the DOM. </p>
  
  <p>Why did the first one stop?</p>
  
  <p>I have tried</p>
  
  <pre><code>$.noConflict()
  </code></pre>
  
  <p>and </p>
  
  <pre><code>jQuery.noConflict()
  </code></pre>
  
  <p>but this just stops it working totally.</p>
  
  <p>My script that adds the draggable element is shown below.</p>
  
  <pre><code> function createTextBox() {
       //Random name for out text box. users dont see this.
  
       var textBoxName = 'tb_' + Math.floor(Math.random() * 10000)
       var html_script;
  
       html_script="&lt;div id='draggable" + textBoxName + "' style='position: absolute; top: 100px; left: 100px;'&gt;" +
                "&lt;img src='../../Images/next.png' style='cursor: pointer;'/&gt;&lt;img style='cursor: pointer;' src='../../Images/delete.png' onclick=\"RemoveTextBox('" + textBoxName + "')\"/&gt;" +
                "&lt;a href='#' class='data_field ui-draggable ui-resizable' id='draggable" + textBoxName + "'&gt;&lt;/a&gt;" +
                "&lt;textarea rows='5' cols='80' title='Text Box' data-tooltip='Tool'" +
                " data-width='100'" +
                " data-height='20'" +
                " data-topx='10'" +
                " data-topy='10" +
                " data-multiline='true'" +
                " data-hidden='false'" +
                " data-type='textBox'" +
                " name='" + textBoxName + "'" +
                " id='" + textBoxName + "'" +
                " class='data_field ui-widget-content ui-corner-all'" +
                " style='background-color: transparent; width: 100px; height: 20px;'&gt;Text Box&lt;/textarea&gt; " +
                "&lt;/div&gt;" 
  
       document.getElementById('text_boxes').innerHTML += html_script;
  
       var java_script = "$(function () {" +
       "            var sh = 0;" +
       "            var sw = 0;" +
       "            $('#draggable" + textBoxName + "').draggable({" +
       "               drag: function (event, ui) {" +
       "                  dragposition = ui.position;" +
       "                  $('#" + textBoxName + "').attr('data-topx', dragposition.left);" +
       "                  $('#" + textBoxName + "').attr('data-topy', dragposition.top);" +
       "              }" +
       "        });" +
       "          $('#" + textBoxName + "').resizable({" +
       "              stop: function (event, ui) {" +
       "                 s = ui.size;" +
       "                 sh = s.height;" +
       "                 sw = s.width;" +
       "                 $('#" + textBoxName + "').attr('data-width', s.width);" +
       "                 $('#" + textBoxName + "').attr('data-height', s.height);" +
       "     }" +
       "  });" +
       "});"
  
       var script = document.createElement('script');
       script.type = 'text/javascript';
       script.text = java_script;
       document.getElementById("text_boxes").appendChild(script);
   };
  </code></pre>
  
  <p>Im really sorry if anyone thinks its bad code but only been at it for a couple of months!</p>
  
  <p>So, what Im trying to do it each time a user click an icon, a draggable box is produced. Then if the user procduces another box, they BOTH remain movable.</p>
  
  <p>Im sure there is a better way of doing it with out generating a script for each box but I dont know that yet!</p>
  
  <p>Thanks</p>
  
  <p>Thanks</p>