Store a different value in the database from dynamically generated forms with PHP?

Take a look at the screenshot below.

As per the screenshot, I have data retrieved in different blocks based on the database. For example, based on username and password, these values ​​are retrieved from the database and displayed in different blocks. I have PHP to store a value in a database, but the problem I am facing is that when I try to load it from another block, it stores the value from the first block. Codes 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 removed the code to load the image from it as it works completely fine. The problem is that data from another block is not being saved to the database. only the value for the first block is saved the second time. How to solve this problem.

PHP for data storage:

<?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;
}
?>