How can I stop PHP the while loop to repeat and cover old data?

Question

I am new to PHP, so I want the while loop the result every times is different because I fetch data from CSV file, so it should not be all the data is same.

This is my code

<div style="margin: 1%">


            <?php
            //include 'barcode128.php';
            require 'vendor/autoload.php';

                if (($csvfile = fopen($_FILES['file']['tmp_name'], "r")) !== FALSE) {
                    while (($csvdata = fgetcsv($csvfile, 1000, ",")) !== FALSE) {

                        $colcount = count($csvdata);

                        if($colcount!=5) {
                            $error = 'Column count incorrect';
                        } else {

                            /*$product = $csvdata[0];
                            $product_id = $csvdata[1];
                            $rate = $csvdata[2];
                            $description = $csvdata[3];
                            $image = $csvdata[4];
                            $imageData = base64_encode(file_get_contents($image));

                                echo '<div class="wrapper">';
                                echo '<div class="a"><img src="data:image;base64,'.$imageData.'" width="50"/>
                                      <div><b>Item: '.$product.'</b></div>
                                      <div><svg id="barcode"><script>JsBarcode("#barcode", "'.$product_id.'",{
                                      format: "code128",width: 1,height: 35,fontOptions: "bold",marginRight:30});</script></svg></div><span><b>Price: '.$rate.' </b></span><div><span><b>Desc: </b>'.$description.'</span></div></p></span>
                                      </div></div>';
                            */

                            $imageData = base64_encode(file_get_contents($csvdata[4]));

                                echo '<div class="wrapper">';
                                echo '<div class="a"><img src="data:image;base64,'.$imageData.'" width="50"/>
                                      <div><b>Item: '.$csvdata[0].'</b></div>
                                      <div><svg id="barcode"><script>JsBarcode("#barcode", "'.$csvdata[1].'",{
                                      format: "code128",width: 1,height: 35,fontOptions: "bold",marginRight:30,font:"arial"});</script></svg></div><span><b>Price: '.$csvdata[2].' </b></span><div><span><b>Desc: </b>'.$csvdata[3].'</span></div></p></span>
                                      </div></div>';

                        }

                    }
                    fclose($csvfile);
                }
            ?>

    </div>

---

The result of the current code: image-result

---

The CSV file: image-csv

---

This is what I want the result: enter image description here

So, how can I make the result can loop every times and break it, then loop the next data from the CSV file? Thank you

Answer 1

The problem is that you are creating multiple svg elements with the same id. You are then using this single id in your JsBarcode() call. By doing this, the Javascript will always act on the first element with this id.

To remedy this, we must create elements with unique ids, and then use this unique id in each Javascript call.

Since you have $product_id = $csvdata[1]; in your commented-out code, this answer is going assume that $csvdata[1] is unique per row.

Inside of your echo , change

<div><svg id="barcode"><script>JsBarcode("#barcode", "'.$csvdata[1].'",{

to

<div><svg id="barcode_'.$csvdata[1].'"><script>JsBarcode("#barcode_'.$csvdata[1].'", "'.$csvdata[1].'",{