title: Include jQuery in JavaScript
body: <p>I've got two bits of code that I'd like to work together but I don't manage to integrate this jQuery snippet into the JavaScript correctly …</p>
  
  <p>JavaScript:</p>
  
  <pre><code>(function(){
  
  // Creates the plugin
  tinymce.create('tinymce.plugins.mygallery', {
  
      // Creates control instances based on the control's ID.
      createControl : function(id, controlManager) {
          if (id == 'mygallery_button') {
  
              // Creates the button
              var button = controlManager.createButton('mygallery_button', {
                  title : 'MyGallery Shortcode', // Title of the button
                  image : '../wp-includes/images/smilies/icon_mrgreen.gif', // Path to the button's image
                  onclick : function() {
  
                      // Triggers the thickbox
                      var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 &lt; width ) ? 720 : width;
                      W = W - 80;
                      H = H - 184;
                      tb_show( 'My Gallery Shortcode', '#TB_inline?width=' + W + '&amp;height=' + H + '&amp;inlineId=mygallery-form' );
                  }
              });
              return button;
          }
          return null;
      }
  });
  
  // Registers the plugin
  tinymce.PluginManager.add('mygallery', tinymce.plugins.mygallery);
  
  
  // Executes this when the DOM is ready
  jQuery(function(){
  
  
  // Creates a form to be displayed everytime the button is clicked
      var form = jQuery('&lt;div id="mygallery-form"&gt;&lt;table id="mygallery-table" class="form-table"&gt;\
          &lt;form id="myForm"&gt;\
              &lt;div id="input1" style="margin-bottom:4px;" class="clonedInput"&gt;\
                  Name: &lt;input type="text" name="name1" id="name1" /&gt;\
              &lt;/div&gt;\
              &lt;div&gt;\
                  &lt;input type="button" id="btnAdd" value="add another name" /&gt;\
                  &lt;input type="button" id="btnDel" value="remove name" /&gt;\
              &lt;/div&gt;\
          &lt;/form&gt;\
  
          &lt;/div&gt;');
  
      […]
  });
  })()
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function() {
          $('#btnAdd').click(function() {
              var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
              var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added
  
              // create the new element via clone(), and manipulate it's ID using newNum value
              var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
  
              // manipulate the name/id values of the input inside the new element
              newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
  
              // insert the new element after the last "duplicatable" input field
              $('#input' + num).after(newElem);
  
              // enable the "remove" button
              $('#btnDel').attr('disabled','');
  
              // business rule: you can only add 5 names
              if (newNum == 5)
                  $('#btnAdd').attr('disabled','disabled');
          });
  
          $('#btnDel').click(function() {
              var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
              $('#input' + num).remove();     // remove the last element
  
              // enable the "add" button
              $('#btnAdd').attr('disabled','');
  
              // if only one element remains, disable the "remove" button
              if (num-1 == 1)
                  $('#btnDel').attr('disabled','disabled');
          });
  
          $('#btnDel').attr('disabled','disabled');
  });
  </code></pre>
  
  <p>FYI: The JS creates a popup with a form (WordPress) and with the jQuery snippet I'd like to implement the feature that the user can add more input fields dynamically.</p>
  
  <p>Thanks for your help!</p>