Php and Javascript resize text area

[PNewCode]

Hello. I am putting this in PHP help because I THINK it's where the problem is. If I'm incorrect than my apologies for putting this in the wrong place.

I have a working script that lists all of the entries in the database inside a text area. Also, I have a javascript to resize that text area. However, the problem is that the resize only works on the first entry showing in the list of all entries. I have a feeling this is an ID issue, though I can't seem to find anywhere that has a fix for this. Any thoughts?

NOTE: The count part of the php I pasted here is used later down in the page (using that function) that isn't showing. I didn't include that because it's working fine

The Javascript

<script>
var $textArea = $("#textarea-container");

// Re-size to fit initial content.
resizeTextArea($textArea);

// Remove this binding if you don't want to re-size on typing.
$textArea.off("keyup.textarea").on("keyup.textarea", function() {
    resizeTextArea($(this));
});

function resizeTextArea($element) {
    $element.height($element[0].scrollHeight);
}
</script>

And the PHP
 

<?php

$servername = "----";
$username = "----";
$password = "----";
$dbname = "----";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM tablename ORDER BY info DESC";
$result = $conn->query($sql);


$resultt = mysqli_query($conn, "select COUNT(id) AS count FROM `tablename`");

if(!$result) {
    die('Error: ' . mysqli_error($link));
} else {
    $num_rows = mysqli_fetch_assoc($resultt);
    // echo it
    echo "";
}

if ($result->num_rows > 0) {
  // output data of each row
  while($row = $result->fetch_assoc()) { ;  

$info = "$info";

$info = preg_replace("/<br\W*?\/>/", "\n", $row["info"]);

echo "<textarea id='textarea-container'>$info</textarea>";

?>

 

[Barand]

1. Your JS script operates on the textarea with id = textarea-container.
2. You create a text area with this id value for each result row.
3. Ids have to be unique - you can have only a single element with a particular id and JS will expect there to be only one.

Consider using a classname rather than an id when you have many similar elements.

[PNewCode]

@Barand Thank you for that. I've been trying to change it to a class instead but I'm failing each time. No errors just "This page is not working" (I suppose that IS an error but not specific)
I can't figure out how to code that in to make it work for each result row with that javascript. Can I get a hint?

[Barand]

4 hours ago, PNewCode said:

that lists all of the entries in the database inside a text area

Your post suggests a single text area, so why are you creating a text area for each row?

[PNewCode]

1 minute ago, Barand said:

Your post suggests a single text area, so why are you creating a text area for each row?

I do this because each row shows in a text area box that can be edited and resubmitted. The user can add or delete text as needed in each entry. That part isn't in my post because it's working for that function. But thats why I have that

[PNewCode]

@Barand I did just manage to make a little progress, kind of.

I changed a line in the javascript to
var $textArea = $(".textarea-container");

And then changed
id='textarea-container'
to
class='textarea-container'

But what it's doing now is changing ALL of the rows text boxes to match the height of the first one haha

[Barand]

try

$res = $pdo->query("SELECT user_review as rvw
                    FROM review
                    ");
                    
foreach ($res as $r) {
    echo "<textarea class='textarea-container'>{$r['rvw']}</textarea><br>";
}

?>

<script type='text/javascript'>
    $(function() {
        $(".textarea-container").each(function(k,v) {
            let scrht = v.scrollHeight
            $(v).height(scrht)
        })
        
        
    })
</script>
   

 

[PNewCode]

20 minutes ago, Barand said:

<script type='text/javascript'>
    $(function() {
        $(".textarea-container").each(function(k,v) {
            let scrht = v.scrollHeight
            $(v).height(scrht)
        })
        
        
    })
</script>

This actually did the trick by itself. I just replaced my javascript with yours. But to make sure I understand for educational purposes, is it the "each(function......" that made this be individual to each row? As well as the CLASS instead of ID?

[Barand]

Yes, the function specified in the each() is applied to each element that has class "textarea-container"

[PNewCode]

@Barand Thank you so very much!