PHP / javascript - How to get value from Input Text Box, and append it to div/Form

Question

EDIT QUESTION: In my WHILE loop, it creates an readonly input text box, and the values are whatever records it pulls from my Database. After each text box, there is an add button, which is suppose to append the value of the text box beside the button, to another div on my page. The only value being added is the first record. I know why, I just can't fix. Any ideas?

    $query = "SELECT `$posResults` FROM test.departments ";
    $result = mysql_query($query);

    if ($result) {
    //output results from database

    echo 'Software';
    while($row = mysql_fetch_array($result))
    {
      echo '<tr>';
      echo '<td><input type="text" id="rSoft" size="50" name="reqSoft" value="'.$row[0].'" readonly/> <button  id="toForm" value="Add" >Add</button>';
      echo '</td>';
      echo '</tr>';
     }
      echo "<script type='text/javascript'>$(document).ready(function(){ $('button#toForm').click(function(){ var req = document.getElementById('rSoft').value;  $('<tr><td>' + req + '</td></tr>').appendTo('#empInfo');}); });</script>";                                     
     }

Here is an image. When I Hit Add, I want the value to go to the div. Right now, only the first value is being appended.

Answer 1

Found out the answer that covers everything: On my main page:

    $query = "SELECT `$posResults` FROM test.departments ";
    $result = mysql_query($query);

    if ($result) {
    //output results from database

    echo 'Software';
    echo '<table>';

    $i = 0;
    while($row = mysql_fetch_array($result))
    {
      echo '<tr><td><input type="text" id="rSoft'.$i.'" value="'.$row[0].'" name="reqSoft" readonly/>';
      echo '<button  id="toForm'.$i.'"  data="rSoft'.$i.'" >Add</button>';
       $i++;
      }
       echo '</table>';
    }

On my JS page:

    /*Add software to form*/
    $(document).ready(function(){
    $('button').on('click' , function(){  
      var inputID = $(this).attr('data');
      var theValue = $('#' + inputID).val();
        $('#empInfo').append('<tr><td>' + theValue + '</td></tr>')
       });  

This will append the data of the input box to where I need it to go. Thank you OIS and Kristen Jukowski for getting me started on the resolution! });

Answer 2

The IDs of your inputs need to be unique. You can pass the values, though, as an array if you change the ID to something like this: echo '<td><input type="text" id="reqSoft[]" size="50" name="reqSoft[]" value="'.$row[0].'" readonly/> <button id="toForm" value="Add" >Add</button>'; Your passed values will be available as an array in $_POST['reqSoft'] . (First textbox value would be $_POST['reqSoft'][0] , etc.)

Similar question/answer here: Dynamically create unique ID for an array of input fields using Javascript