Q:

Multiple AJAX requests only first one works other fails

I have multiple inputs and for each of them I have a separate AJAX request.

< script type = "text/javascript" >
  $(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);
        }
      });
    });
  }); < /script>

the input code is 

<p style="text-align: center;font-size: 15pt;">
  <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" />
</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.
Code for second input

<script type="text/javascript">
  $(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);
        }
      });
    });
  });
</script>
<p style="text-align: center;font-size: 15pt;">
  <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" />
</p>

A:

Thanks to the suggestion by @charlietfl I made some changes to the code such as now it looks at the class and thus I only have to use the code once and it also get the id of the field as well as input so that I can know which input it came from 

< script type = "text/javascript" >
  $(document).ready(function() {
    $(".rating").change(function() {
      var rating1 = $(this).val();
      var inputId = $(this).attr("id");
      alert(inputId);
      $.ajax({
        url: "a.php",
        type: "post",
        data: {
          param_name: rating1,
          id: inputId
        },
        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);
        }
      });
    });
  }); < /script>

