jQuery Get values of number fields depending on Button Click

I have 20 fields that are created (numbered 1-20) with corresponding submit buttons. I need to retrieve the values of those fields for an AJAX post depending on which button number was clicked. For example:

$(function(){
    $("#addCommentButton1").click(function(event) {



var trackid = $("#trackidField1").val();
var comment = $("#addcommentfield1").val();



$(function(){
    $("#addCommentButton2").click(function(event) {


var trackid = $("#trackidField2").val();
va开发者_如何学运维r comment = $("#addcommentfield2").val();

I'm hoping there is an easier way to do this than writing the function 20 times.

Thanks!

$(function(){
    $(".addCommentsExpBtn").click(function(event) {
        var container = $(this).closest(".songPost"); 
     container.find('.addCommentsExp').slideToggle();
});
  });

you can do like this,

<div>
      <input type="button" class="addCommentBtn" value="Add Comment">
      <input type="text" class='trackId'>
    </div>
    <div>
      <input type="button" class="addCommentBtn" value="Add Comment">
      <input type="text" class='trackId'>
    </div>

and jquery,

$(function(){
   $(".addCommentBtn").click(function(event) {
             var parent=$(this).parent();      

            var trackid = $(".trackId",parent).val();
            //others
       });
});

Give each of your elements a class name.

You can then write

$(function(){
    $(".addCommentButton1").click(function(event) {
        var container = $(this).closest(".commentBoxContainer");
        var trackid = container.find(".trackidField").val();
        var comment = container.find(".addcommentfield").val();