Добавляйте строки динамически с выпадающим списком и связанным значением

Question

У меня есть таблица Dynami c с:

1. 1-й столбец - флажок (для опции удаления)
2. 2-й столбец - раскрывающийся список (Пряжа). Значения опций, извлеченные из базы данных
3. 3-й столбец - Связанное значение (цена) из выбранного варианта 2-го столбца. Извлечено из базы данных.

Вверху этой таблицы есть 2 кнопки - Добавить строку и Удалить строку.

Коды:

main. php:

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">  
<input type="button" id="addrow" name = "addrow" value="Add Row" onclick="addRow('yarnTable');"/>
<input type="button" id="delrow" name = "delrow" value="Delete Row" onclick="deleteRow('yarnTable');"/>
    <table id = "yarnTable">
        <tr>
            <td><input type='checkbox' name='chk'/></td>
            <td><select name="Yarn" id="Yarn" onchange="fetch_select(this.value);"> 
                <option selected="selected" value="">-- Select an option --</option>
                <?php
                    $rows = $resultSet->fetchAll(PDO::FETCH_ASSOC);
                    foreach($rows as $value){ 
                ?>  
                    <option value=<?php echo $value['id'] ?>><?php echo $value['description'] ?></option>
                    <?php 
                        } 
                    ?>
                </select>
            </td>
            <td><div id = "yarnprice"></div></td>
        </tr>
    </table>

Функция fetch_select:

function fetch_select(val)
{
    $.ajax({
            type:'post',
            url: 'getYarn.php',
            data: {
                    get_option:val                  
                  },
            success: function (response) 
            {       
            document.getElementById("yarnprice").innerHTML=response; 
            }
           });     
} 

getyarn. php:

<?php
 if(isset($_POST['get_option']))
{

 $connectionInfo = array("Database"=>$db, "UID"=>$user, "PWD"=>$pass);
 $dbhandle = sqlsrv_connect($server,$connectionInfo) or die("Couldn’t connect to SQL Server on $server");
 if( $dbhandle === false ) 
    {
    die( print_r( sqlsrv_errors(), true));
    }

 $id = $_POST['get_option'];
 $find=sqlsrv_query($dbhandle, "select price2 from tblYarnFilament where id='$id'");

    while($row=sqlsrv_fetch_array($find))
    {   
        echo $row['price2'];
    }
}   
?>

Функция addRow в кнопке addrow:

function addRow(tableID) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";
    element1.name="chkbox[]";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    var element2 = document.getElementById("Yarn");
    var elm2 = element2.cloneNode(true);
    elm2.type = "select-one";
    elm2.name = "select[]";
    cell2.appendChild(elm2);

    var cell3 = row.insertCell(2);
    var element3 = document.getElementById("yarnprice");
    var elm3 = element3.cloneNode(true);
    //maybe something needs to be done here?        
    }

The цена будет отражена в <div id = "yarnprice">. Теперь проблема заключается в следующем:

1. При первой загрузке, когда пряжа выбрана из выпадающего меню, цена отображается в 3-м столбце правильно.
2. При нажатии кнопки Добавить строку создается новая пустая строка, значение цены копируется из 1-й строки.
3. После выбора нового значения из раскрывающегося списка (2-й строки) новое значение цены отражается в первой строке .
4. Значение цены во 2-й строке остаются без изменений.

Так что каждый раз, когда я добавляю новую строку и выбираю из выпадающего списка, это будет отражать изменение цены в 1-й строке. Как сделать так, чтобы цена отражалась в правильной строке?