title: Multiple AJAX requests only first one works other fails
body: <p>I have multiple inputs and for each of them I have a separate AJAX request.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt; script type = "text/javascript" &gt;
    $(document).ready(function() {
      $("#id_1").change(function() {
        var rating1 = $(this).val();
        //                            alert(rating1);
        $.ajax({
          url: "a.php",
          type: "post",
          data: {
            param_name: rating1
          },
          success: function(response) {
            //                                    alert(response);
            $("#message").html(response);
            // you will get response from your php page (what you echo or print)
          },
          error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
          }
        });
      });
    }); &lt; /script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the input code is </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p style="text-align: center;font-size: 15pt;"&gt;
    &lt;input type="number" name="your_awesome_parameter" id="id_1" class="rating" data-clearable="remove" data-icon-lib="fa" data-active-icon="fa-heart" data-inactive-icon="fa-heart-o" data-clearable-icon="fa-trash-o" /&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have multiple inputs in seperate divs with unique IDs and those ids are also unique in the AJAX code. When I run it only the first one works but the second one does not.</p>
  
  <p>Code for second input</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function() {
      $("#id_2").change(function() {
        var rating1 = $(this).val();
        //                            alert(rating1);
        $.ajax({
          url: "a.php",
          type: "post",
          data: {
            param_name: rating1
          },
          success: function(response) {
            //                                    alert(response);
            $("#message").html(response);
            // you will get response from your php page (what you echo or print)
          },
          error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
          }
        });
      });
    });
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p style="text-align: center;font-size: 15pt;"&gt;
    &lt;input type="number" name="your_awesome_parameter" id="id_2" class="rating" data-clearable="remove" data-icon-lib="fa" data-active-icon="fa-heart" data-inactive-icon="fa-heart-o" data-clearable-icon="fa-trash-o" /&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>