title: Handle multiple forms with dynamic HTML element ids through jQuery
body: <p>I have a situation where my php page generates multiple forms based on the data received through a third party api.</p>
  
  <p>My requirement is to handle a jQuery modal confirmation for these dynamically generated form elements but I'm at a loss since jQuery is unable to handle this in my case.</p>
  
  <p>I have tried JSFiddle too but couldn't get it working; <a href="http://jsfiddle.net/9ZBGr/" rel="nofollow">here</a>.</p>
  
  <p><strong>EDIT</strong>: There was not much wrong with the script but fiddle adds the windo onLoad which was interfering with the script:</p>
  
  <pre><code>window.onload=function(){
  function formSubmit(formId) {
      alert('here');
      var submitForm = $('#form_twake' + formId);
  ...
  </code></pre>
  
  <p>The modal confirmation div ('confirm' within the form) should also remain hidden but I can see that appearing in fiddle as well.</p>
  
  <p>I know I am missing something very basic since I cannot get fiddle to work but so far I am at a complete loss; my research on this topic leads to id creations through jQuery or form submit through jQuery but I am not inclined to go that route unless the current flow is unfeasible.</p>
  
  <p>The forms are generated just fine and a regular html submit yields the desired results; but without the modal confirmation.</p>
  
  <p>Any leads to how can I achieve this dynamic handling of generated forms with a generic jQuery?</p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>&lt;script&gt;
  function formSubmit(id) {
  var submitForm = $('#form_twake'+id);
  submit = false;
  
  $('#confirm'+id).dialog({
      resizable: false,
      height: 140,
      modal: true,
      autoOpen: false,
      buttons: {
          'Submit': function() {
              $(this).dialog('close');
              submit = true;
              submitForm.submit();
          },
          'Cancel': function() {
              $(this).dialog('close');
          }
      }
  });
  //$("#confirm").parent().appendTo($("#form_twake")); 
  
  submitForm.submit(function() {
      if (submit) {
          return true;
      } else {
          $("#confirm"+id).dialog('open');
          return false;
      }
  });
  };
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>PHP where forms are generated:</strong></p>
  
  <pre><code> &lt;html&gt;
      &lt;body&gt;
      &lt;center&gt;
      &lt;div&gt;&lt;img src="includes/static/logo.png" alt="Twake"/&gt;&lt;/div&gt;
      &lt;/br&gt;
      &lt;?php
      try {
      $suffix = 0;
      foreach ( $json ['users'] as $bud ) {
          $keys = array_keys ( $bud );
          $suffix = $suffix + 1;
          ?&gt;
      &lt;form id="form_twake&lt;?php echo $suffix?&gt;" name="form_twake&lt;?php echo $suffix?&gt;" method="POST" action="index.php" onsubmit="formSubmit(&lt;?php echo $suffix?&gt;)"&gt;
      &lt;div class="box fade-in one"&gt;
              &lt;input type="submit" value="Destroy" class="twake-button" /&gt;
              &lt;div id="confirm&lt;?php echo $suffix?&gt;" style="display: hidden;" title="Bin user?"&gt;
                  &lt;p&gt;&lt;span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"&gt;&lt;/span&gt;Confirm cleanup of the user &lt;?php echo $bud ['name'];?&gt;?&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  
      &lt;?php
      }
      }
      catch (Exception $e) {
      echo 'Please check your connection and try again. ' . $e-&gt;getMessage();
      }
      ;
      ?&gt;
  
      &lt;/center&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>