Store different value in the database from the forms created dynamically using PHP?

Have a look at the screenshot below.

As per the screenshot, I have the data fetched into the different blocks based on the database. For example, based on the username and password, these values are fetched from the database and displayed in different blocks. I have the PHP to store the value into the database, but the problem that I am facing is that when i try to upload it from other block, it still saves the value from the first block. Codes as as below:

<?php  
include('includes/config.php');
 $upload = 'uploads/';

 session_start();
 $_SESSION['$userid'];

$sql = "SELECT * FROM tbl_store INNER JOIN tbl_job ON tbl_store.store_code = tbl_job.store_code WHERE username = '$userid'";


    $result = mysqli_query($conn,$sql);
    $rowcount=mysqli_num_rows($result);
   // echo "$rowcount";
    $stores = array();
    $stores_add = array();
    $stores_chain = array();
    $job = array();
    $client = array();
    $brand = array(); 
        $week= array();
    $x = 1;
    $imgCnt =1;

        while($row = mysqli_fetch_array($result)){


         echo "工作".'<br/>';
         echo $row['jobs'].'<br/>'.'<br/>'; 
         $job[] = $row['jobs'];

         echo "客戶".'<br/>';
         echo $row['Client'].'<br/>'.'<br/>'; 
         $client[] = $row['Client'];

         echo "牌子".'<br/>';
         echo $row['Brand'].'<br/>'.'<br/>'; 
         $brand[] = $row['jobs'];

         echo "週數".'<br/>';
         echo $row['week'].'<br/>'.'<br/>'; 
         $week[] = $row['week'];

         $target = $upload.'/'.$row['Client'].'/'.$row['Brand'].'/'.$row['jobs'].'/'.$row['store_code'].'/';
          $testpath = $row['Client'].'/'.$row['Brand'].'/'.$row['jobs'].'/'.$row['store_code'].'/';
         $_SESSION['target1'.$x] = $target; 
         if(!file_exists($target))
         {
             mkdir($target,0777,true);
         }
         ?>
    <form id='uploadForm-<?php echo $imgCnt; ?>' action = '' enctype='multipart/form-data' method = 'POST' class="form<?php echo $imgCnt; ?>">
        <input type="file"  class="image<?php echo $imgCnt; ?>" name="img" onChange="readURL(this);" />
        <img id="blah" src="#" alt="your image" /><br/><br/>
        <input type='button' id = '<?php echo $imgCnt; ?>' class='uploadPicture<?php echo $imgCnt; ?> btn btn-primary' value = '上載'>
        <!-- <input type="button" value="上載" class="uploadPicture"  id="upload_btn<?php echo $imgCnt; ?>"/> -->
    </form>
<form enctype="application/x-www-form-urlencoded">
<table width="200" border="1">
  <tr>
    <td>Product</td>
    <td>Promotional Price</td>
    <td>Regular Price</td>
    <td>Stacking</td>
  </tr>
  <tr>
    <td><input type="text" id="product"></td>
    <td><input type="text" id="pp1"></td>
    <td><input type="text" id="rp1"></td>
    <td><input type="text" id="stacking"></td>
  </tr>
</table>
<div id ="div1">
<input type="button"  value="Submit"  onClick="PostData();"/><br/>
</div>
</form>

    <script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function PostData() {




    // 1. Create XHR instance - Start
    var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    else {
        throw new Error("Ajax is not supported by this browser");
    }
    // 1. Create XHR instance - End

    // 2. Define what to do when XHR feed you the response from the server - Start
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status == 200 && xhr.status < 300) {
                document.getElementById('div1').innerHTML = xhr.responseText;
            }
        }
    }
    // 2. Define what to do when XHR feed you the response from the server - Start

    var product = document.getElementById("product").value;
    var pp1 = document.getElementById("pp1").value;
    var rp1 = document.getElementById("rp1").value;
    var stacking = document.getElementById("stacking").value;

    // var image = document.getElementById("image").value;
    // 3. Specify your action, location and Send to the server - Start 


    xhr.open('POST', 'report.php');
    //xhr.open('POST', 'config.php');
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("product=" + product + "&pp1=" + pp1 + "&rp1=" + rp1 + "&stacking=" + stacking);
    //xhr.send("&pid=" + pid);
    // 3. Specify your action, location and Send to the server - End


}

</script>
<?php
echo "-------------------------------------------------------".'<br/>';
        $x = $x+1;
        $imgCnt++;
      }
?>

I have removed the code for image upload from it as it works completely fine. The problem is the data from the other block is not stored to the database. only the value for the first block is stored second time even. How to solve this problem.

PHP to store data:

<?php  
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "testing";

$conn = new mysqli($servername, $username, $password, 

$dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "INSERT INTO tbl_report (product,pp1, rp1,stacking) 

VALUES ('$product', '$pp1', '$rp1','$stacking')";

if ($conn->query($sql) === TRUE) {
    echo "Successful";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}
?>