I have multiple same name class on form, only one item need to be populated via an ajax query

Need to select an item in a dropdown and do a ajax query and return the price associated with that item and size in the row that was previously selected

Example:

<select class="size" id="size">
   <option value="12">"500g"</option>
   <option value="14">"Bag 400g-500g"</option>
</select>

Need value 14

1. $('.size').change(function ()
2.         {
3.             var size = $(this).parent().parent().text();   // problem with this line of code.....
   
4.             //var size = 14; // this work if if i pass the 14
   
5. 
   
6.             $.ajax(
7.                     {
8.                         type: 'POST',
9.                         url: "size.php",
10.                         data: {size: size},
11.                         dataType: 'JSON',
12.                         success: function (data)
13.                         {
14.                             $('#prsize').val(data[0].prsize); // also problem to store in the row that was selected. Now it store the value in all of the rows.
    
15.                         }
16.                     });
17.         });
18. .
19. //This class get repeated per row. Dynamic table that gets created via a query
    
20. <div class=\"prsize\"></div>