title: Ajax only Working on first element of Bootstrap Modal in WordPress
body: <p>I am using <strong>Bootstrap modal</strong> and Ajax as well to submit my Booking Form for different Product. The Ajax submit is working but only for for the first Product. When I try to submit the booking form for other Products, it redirects to <strong>404 Error Page</strong>. I am trying to debug this for hours but didn't work. </p>
  
  <p><strong>Here's my code:</strong> </p>
  
  <p><strong>COMPLETE MODAL FORM</strong></p>
  
  <pre><code>&lt;div class="package-holder"&gt;
      &lt;div class="row"&gt;
          &lt;?php global $post;  $catquery = new WP_Query(  array(
              'cat' =&gt; 3,
              'posts_per_page' =&gt; -1,
              'orderby' =&gt; 'date',
              'order' =&gt; ASC
          )); ?&gt;  
          &lt;?php   while($catquery-&gt;have_posts()) : $catquery-&gt;the_post(); ?&gt;
              &lt;?php $id = get_the_id(); ?&gt;
          &lt;div class="col-sm-6 box-wrap"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-7"&gt;
                      &lt;div class="package-details"&gt;
                          &lt;h3&gt;&lt;?php echo $post-&gt;post_title; ?&gt;&lt;/h3&gt;
                          &lt;p&gt;&lt;?php echo $post-&gt;post_excerpt; ?&gt;&lt;/p&gt;
                          &lt;button class="btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-lg-&lt;?php echo $id; ?&gt;"&gt;More Details&lt;/button&gt;
  
                          &lt;a class="btn btn-danger" data-toggle="modal" data-target=".book-form-&lt;?php echo $id; ?&gt;"&gt;Book Package&lt;/a&gt;
  
                          &lt;div class="modal fade bs-example-modal-lg-&lt;?php echo $id; ?&gt;" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"&gt;
                              &lt;div class="modal-dialog modal-lg" role="document"&gt;
                                  &lt;div class="modal-content"&gt;
                                    &lt;div class="modal-header"&gt;
                                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                                      &lt;h4 class="modal-title" id="myModalLabel"&gt;&lt;?php echo $post-&gt;post_title; ?&gt;&lt;/h4&gt;
                                    &lt;/div&gt;
                                    &lt;div class="modal-body"&gt;
                                      &lt;p&gt;&lt;?php the_content(); ?&gt;&lt;/p&gt;
                                     &lt;/div&gt;
                                    &lt;div class="modal-footer"&gt;
                                      &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;Close&lt;/button&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="modal bform fade book-form-&lt;?php echo $id; ?&gt;" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"&gt;
                              &lt;div class="modal-dialog modal-lg" role="document"&gt;
                                  &lt;div class="modal-content"&gt;
                                    &lt;div class="modal-header"&gt;
                                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                                      &lt;h4 class="modal-title" id="myModalLabel"&gt;&lt;?php echo $post-&gt;post_title; ?&gt;&lt;/h4&gt;
                                    &lt;/div&gt;
                                      &lt;div class="modal-body"&gt;
                                          &lt;div class="form-wrap"&gt;
                                              &lt;form id="packageForm" method="post" class="clearfix"&gt;
                                                  &lt;div class="row"&gt;
                                                      &lt;div class="form-group col-sm-6"&gt;
                                                          &lt;label for="name" class=""&gt;Name&lt;/label&gt;
                                                          &lt;input id="name" name="name" type="text" class="form-control" placeholder="Your Name" required&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="form-group col-sm-6"&gt;
                                                          &lt;label for="phone" class=""&gt;phone&lt;/label&gt;
                                                          &lt;input id="phone" name="phone" type="tel" class="form-control" placeholder="Your Phone Number" required&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="form-group col-sm-6"&gt;
                                                          &lt;label for="email" class=""&gt;email&lt;/label&gt;
                                                          &lt;input id="email" name="email" type="email" class="form-control" placeholder="Your Email Address" required&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="form-group col-sm-6"&gt;
                                                          &lt;label for="pref-date" class=""&gt;pref-date&lt;/label&gt;
                                                          &lt;input id="pref-date" name="pref_date" type="date" class="form-control" placeholder="Prefered Date" required&gt;
                                                      &lt;/div&gt;
                                                      &lt;input type="hidden" name="package" value="&lt;?php echo $post-&gt;post_title; ?&gt;"&gt;
                                                      &lt;div class="col-sm-12 form-group"&gt;
                                                          &lt;label for="message" class=""&gt;message&lt;/label&gt;
                                                          &lt;textarea class="form-control" id="message" name="message" cols="30" rows="10" placeholder="Write your Message here" required&gt;&lt;/textarea&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                                  &lt;div class="col-sm-12 btn-wrap"&gt;
                                                          &lt;button type="submit" class="btn btn-danger"&gt;Submit&lt;/button&gt;
                                                          &lt;input type="hidden" name="action" value="packageForm" /&gt;
                                                          &lt;img class="gif" src="&lt;?php echo get_stylesheet_directory_uri().'/img/oval.svg'; ?&gt;" class="gif" width="30" alt="loading" style="display: none;"&gt;
                                                  &lt;/div&gt;
                                                  &lt;div id="response"&gt;&lt;/div&gt;
                                              &lt;/form&gt;
                                          &lt;/div&gt;          
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-5"&gt;
                      &lt;figure class="image-wrap row"&gt;
                          &lt;?php the_post_thumbnail( 'full', array( 'class' =&gt; 'img-responsive' ) ); 
                          ?&gt;
                      &lt;/figure&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;?php endwhile; ?&gt;
          &lt;div class="col-sm-12 box-wrap"&gt;
          &lt;?php global $post;  $full_cat = new WP_Query(  array(
              'cat' =&gt; 4,
              'posts_per_page' =&gt; 1,
              'orderby' =&gt; 'date',
              'order' =&gt; ASC
          )); ?&gt;  
              &lt;div class="row"&gt;
              &lt;?php   while($full_cat-&gt;have_posts()) : $full_cat-&gt;the_post(); ?&gt;
                  &lt;div class="col-sm-9"&gt;
                      &lt;div class="package-details"&gt;
                          &lt;h3&gt;&lt;?php the_title(); ?&gt;&lt;/h3&gt;
                          &lt;p&gt;&lt;?php the_excerpt(); ?&gt;&lt;/p&gt;
                          &lt;button class="btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-lg-&lt;?php echo $id; ?&gt;"&gt;More Details&lt;/button&gt;
  
                          &lt;a class="btn btn-danger" data-toggle="modal" data-target=".book-form-&lt;?php echo $id; ?&gt;"&gt;Book Package&lt;/a&gt;
  
                          &lt;div class="modal fade bs-example-modal-lg-&lt;?php echo $id; ?&gt;" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"&gt;
                              &lt;div class="modal-dialog modal-lg" role="document"&gt;
                                  &lt;div class="modal-content"&gt;
                                    &lt;div class="modal-header"&gt;
                                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                                      &lt;h4 class="modal-title" id="myModalLabel"&gt;&lt;?php echo $post-&gt;post_title; ?&gt;&lt;/h4&gt;
                                    &lt;/div&gt;
                                    &lt;div class="modal-body"&gt;
                                      &lt;p&gt;&lt;?php the_content(); ?&gt;&lt;/p&gt;
                                     &lt;/div&gt;
                                    &lt;div class="modal-footer"&gt;
                                      &lt;button type="button" class="btn btn-warning" data-dismiss="modal"&gt;Close&lt;/button&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="modal fade book-form-&lt;?php echo $id; ?&gt;" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"&gt;
                          &lt;div class="modal-dialog modal-lg" role="document"&gt;
                              &lt;div class="modal-content"&gt;
                                &lt;div class="modal-header"&gt;
                                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                                  &lt;h4 class="modal-title" id="myModalLabel"&gt;Himalayan Rejuvenation  Package&lt;/h4&gt;
                                &lt;/div&gt;
                                  &lt;div class="modal-body"&gt;
                                      &lt;div class="form-wrap"&gt;
                                              &lt;form id="FullpackageForm" method="post" class="clearfix"&gt;
                                                  &lt;div class="row"&gt;
                                                      &lt;div class="form-group col-sm-6"&gt;
                                                          &lt;label for="name" class=""&gt;Name&lt;/label&gt;
                                                          &lt;input id="name" name="name" type="text" class="form-control" placeholder="Your Name" required&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="form-group col-sm-6"&gt;
                                                          &lt;label for="phone" class=""&gt;phone&lt;/label&gt;
                                                          &lt;input id="phone" name="phone" type="tel" class="form-control" placeholder="Your Phone Number" required&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="form-group col-sm-6"&gt;
                                                          &lt;label for="email" class=""&gt;email&lt;/label&gt;
                                                          &lt;input id="email" name="email" type="email" class="form-control" placeholder="Your Email Address" required&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="form-group col-sm-6"&gt;
                                                          &lt;label for="pref-date" class=""&gt;pref-date&lt;/label&gt;
                                                          &lt;input id="pref-date" name="pref_date" type="date" class="form-control" placeholder="Prefered Date" required&gt;
                                                      &lt;/div&gt;
                                                      &lt;input type="hidden" name="package" value="&lt;?php echo $post-&gt;post_title; ?&gt;"&gt;
                                                      &lt;div class="col-sm-12 form-group"&gt;
                                                          &lt;label for="message" class=""&gt;message&lt;/label&gt;
                                                          &lt;textarea class="form-control" id="message" name="message" cols="30" rows="10" placeholder="Write your Message here" required&gt;&lt;/textarea&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                                  &lt;div class="col-sm-12 btn-wrap"&gt;
                                                          &lt;button type="submit" class="btn btn-danger"&gt;Submit&lt;/button&gt;
                                                          &lt;input type="hidden" name="action" value="FullpackageForm" /&gt;
                                                          &lt;img class="gif" src="&lt;?php echo get_stylesheet_directory_uri().'/img/oval.svg'; ?&gt;" class="gif" width="30" alt="loading" style="display: none;"&gt;
                                                  &lt;/div&gt;
                                                  &lt;div id="fullresponse"&gt;&lt;/div&gt;
                                              &lt;/form&gt;
                                      &lt;/div&gt;          
                                  &lt;/div&gt;
                              &lt;/div&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-3"&gt;
                      &lt;figure class="image-wrap row"&gt;
                          &lt;?php the_post_thumbnail( 'full', array( 'class' =&gt; 'img-responsive' ) ); 
                          ?&gt;
                      &lt;/figure&gt;
                  &lt;/div&gt;
              &lt;?php endwhile; ?&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/N4dIj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N4dIj.png" alt="BOOKING FORM"></a>
  <strong>From above code, the ajax form is</strong></p>
  
  <pre><code>&lt;form id="packageForm" method="post" class="clearfix"&gt;
      &lt;div class="row"&gt;
          &lt;div class="form-group col-sm-6"&gt;
              &lt;label for="name" class=""&gt;Name&lt;/label&gt;
              &lt;input id="name" name="name" type="text" class="form-control" placeholder="Your Name" required&gt;
          &lt;/div&gt;
          &lt;div class="form-group col-sm-6"&gt;
              &lt;label for="phone" class=""&gt;phone&lt;/label&gt;
              &lt;input id="phone" name="phone" type="tel" class="form-control" placeholder="Your Phone Number" required&gt;
          &lt;/div&gt;
          &lt;div class="form-group col-sm-6"&gt;
              &lt;label for="email" class=""&gt;email&lt;/label&gt;
              &lt;input id="email" name="email" type="email" class="form-control" placeholder="Your Email Address" required&gt;
          &lt;/div&gt;
          &lt;div class="form-group col-sm-6"&gt;
              &lt;label for="pref-date" class=""&gt;pref-date&lt;/label&gt;
              &lt;input id="pref-date" name="pref_date" type="date" class="form-control" placeholder="Prefered Date" required&gt;
          &lt;/div&gt;
          &lt;input type="hidden" name="package" value="&lt;?php echo $post-&gt;post_title; ?&gt;"&gt;
          &lt;div class="col-sm-12 form-group"&gt;
              &lt;label for="message" class=""&gt;message&lt;/label&gt;
              &lt;textarea class="form-control" id="message" name="message" cols="30" rows="10" placeholder="Write your Message here" required&gt;&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-12 btn-wrap"&gt;
              &lt;button type="submit" class="btn btn-danger"&gt;Submit&lt;/button&gt;
              &lt;input type="hidden" name="action" value="packageForm" /&gt;
              &lt;img class="gif" src="&lt;?php echo get_stylesheet_directory_uri().'/img/oval.svg'; ?&gt;" class="gif" width="30" alt="loading" style="display: none;"&gt;
      &lt;/div&gt;
      &lt;div id="response"&gt;&lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Handling Ajax Request via <code>functions.php</code></strong></p>
  
  <pre><code>// Ajax for Package Form
  wp_enqueue_script('jquery');
  
  function packageForm(){
  
  global $wpdb;
  $package_name =$_POST['package'];
  $name = $_POST['name'];
  $phone = $_POST['phone'];
  $email = $_POST['email'];
  $date = $_POST['pref_date'];
  $message = $_POST['message'];
  $quote = 'Package Name:'.$package_name."\n\r".'Full Name: '.$name."\n\r".'Phone: '.$phone."\n\r".'Email: '.$email."\n\r".'Available Date: '.$date."\n\r".'Message: '.$message;
  $to = 'prabin.b9@gmail.com'; // put your email here
  $headers = 'From:Himalayan spa &lt;info@himalayanbodycare.com&gt;' . "\r\n"; // put user's email here or duplicate your email
  $subject = 'Request For Spa';
  
  if(wp_mail($to, $subject, $quote, $headers)===FALSE){
  echo "Error";
  }
  else {
  echo "&lt;h3&gt; Message Successfully Sent&lt;/h3&gt;";
  }
  die();
  }
  add_action('wp_ajax_packageForm', 'packageForm');
  add_action('wp_ajax_nopriv_packageForm', 'packageForm'); 
  </code></pre>
  
  <p><strong>Finally my <code>jQuery</code> in <code>custom.js</code></strong></p>
  
  <pre><code>jQuery(document).ready(function(jQuery){
  jQuery('#packageForm').submit(packageSubmit);     
          function packageSubmit(){
             var ceccForm = jQuery(this).serialize();
              jQuery.ajax({
              type:"POST",
              url: "wp-admin/admin-ajax.php",
              data: ceccForm,
              success:function(data){
              console.log(data);
              jQuery("#response").html(data);
              jQuery("#packageForm")[0].reset();
              }
          });
        return false;
        }
   }); 
      jQuery(document).ajaxStart(function(){
        jQuery('.gif').show();
              }).ajaxStop(function(){
        jQuery('.gif').hide();
      });
  </code></pre>
  
  <blockquote>
    <p>As Mentioned earlier, The Ajax is working only for the first element
    of the product as shown in the screenshot. Please Help !!</p>
  </blockquote>