使用ajax在循环中填充表单字段

The first row only works in my row.

<?PHP for ($i = 1; $i <= 20; $i++){ ?>
            <div id="lines" class="row">
                <div class="col-sm-1" style="text-align:left;border:1px solid #808080"><span id="row_number"><?PHP if ( $i < 10 ){ echo "0".$i;}else{echo $i;} ?></span></div>
                <div class="col-sm-2" style="text-align:left;border:1px solid #808080">
                    <select id="part_number" style="border:0px;">
                        <option value="None Selected"></option>
                        <?PHP
                            $partNumbers = $wpdb->get_results("SELECT * FROM _cif_inventory_table;");
                                foreach ($partNumbers as $partNumber) {
                                    echo '<option value="'.$partNumber->part_number.'">'.$partNumber->part_number.'</option>';
                                }
                        ?>
                    </select>
                </div>
                <div class="col-sm-1" style="text-align:left;border:1px solid #808080"><input size="5" maxlength="5" id="quantity" value="" /></div>
                <div class="col-sm-6" style="text-align:left;border:1px solid #808080"><input size="75" id="description-<?PHP echo $i; ?>" value="" /></div>
                <div class="col-sm-1" style="text-align:left;border:1px solid #808080"><input id="unitPrice-<?PHP echo $i; ?>" /></div>
                <div class="col-sm-1" style="text-align:left;border:1px solid #808080"><input id="amount" value="" /></div>
            </div><!-- end .row -->
        <?PHP } ?>

I'm pretty sure it's the id's that aren't working as expected because they are all the same so I decided to add my loop counter to my id <input size="75" id="description-<?PHP echo $i; ?>" value="" /> and <input id="unitPrice-<?PHP echo $i; ?>" /> but I am confused on how to got this on the ajax side I tried to do it like

UPDATE

    $.ajax({
    url: '<?PHP echo admin_url('admin-ajax.php'); ?>',
    type: 'post',
    data: { action: 'description', part_number: part_number },
    success: function(data) {

        for ( var i = 1; i <= 20; i++ ) {
          $('#description-' + i).val( data );
        }
    }
    });

but this populates every description field on the selection of the dropdown on row 1.

First, switch your loop to javascript instead of php.

for (var i = 1; i <= 20; i++) {

}

Then, add string concatenation for the ID.

for (var i = 1; i <= 20; i++) {
    $('#description-' + i).val( data );
}

That's how to properly select the HTML element, however, with your current code all of their values will be set to the same value.

You should avoid generating javascript for each row. Imagine what happen if you have 100 row per page. You can use data-value in Html and then get the value in js. This is your html:

<input type="text" data-name="test" data-value="123" data-id="123" class="myinput"/>

And this can be your js:

$(".myinput").click(function(){
   var name=$(this).data("name");
   var value=$(this).data("value");
   var id=$(this).data("id");
});