How to make the div editable to textarea and upload/delete existing images

Question

I have a website where user can upload images, name and description. I am saving it in mysql and fetching that information to show on my website. That's what my below code does, let the user enter those information (image and text) and show it on the website when they click submit button.

My question is how can I make the div (that shows images, name and desc) to editable when user clicks the edit button (so change that same div to textarea or something that is editable) and for images should have an cross mark near the image when clicked on edit button, so user can delete it and upload button to upload more images.

What I have done: I try to use javascript to get the value of div and use that to change it to textarea, but it says the value is undefined for the grid div.

So, how can I make my div editable as explained above, as what I have try so far is not complete, so is there any better way to make the div editable same way I explained above so user can edit text and upload or delete images?

My code:

 <?php
    
    require "database.php"; // connecting to database
    session_start();
    
    global $username;
    $username = $_SESSION['userUsername'].$_SESSION['userId']; //fetching the username
  
    
    $image = "userPos/$username"; //fetching image posted by specific user
    
    function listFolderFiles($dir, $username){
    
   <!-- The div my_class is getting the images from local storage
         that was initially uploaded by user in the website
 (and we stored it in the local storage) to display them on the website -->

    echo '<div class="my_class">';  
        $ffs = scandir($dir);
    
        unset($ffs[array_search('.', $ffs, true)]);
        unset($ffs[array_search('..', $ffs, true)]);
        // prevent empty ordered elements
        if (count($ffs) < 1)
            return;
   
        foreach($ffs as $ff){
      
        $s = "'<li>'.$ff";
         $saving = "$dir/$ff";
          $string = "$saving";
          global $string_arr;
          $string_arr = (explode("/",$string));
          $sav;
          $sav =  '<li>'.$ff;
          global $sa;
          $sa = "$ff";
          
          echo '<div class="imagess">';
    
       
           if(is_file($saving)) {
            
            echo '
     <div class="images">
          <img src="'.$saving.' " width="100" height="100" alt="Random image" class="img-responsive"  />
          </div>
            
            ' ;
           }
           echo `</div>`;
    
        
            if(is_dir($dir.'/'.$ff)) listFolderFiles($dir.'/'.$ff, $username);
        
        }
        echo `</div>`;
       
    
     
        require "database.php";
    
        <!--Here we are fetching the name and description
         that was entered by user on the website
          and displaying them on the website now-->

        $username = $_SESSION['userUsername'].$_SESSION['userId'];
        
        $sql = "SELECT * FROM `_desc` WHERE `username` = '$username' AND `id` = '$string_arr[2]';";
        
        $result = mysqli_query($conn, $sql);
        $resultCheck = mysqli_num_rows($result);
        
     
        if($resultCheck > 0) {
            echo '</br>';
        
            while($row = mysqli_fetch_assoc($result) ) {
               //name and desc
                echo '<div class="grid">' . '<h2>' .  $row["_name"] . '</h2>' . '</div>';
               
                echo '<div class="grid2">' . '<p>' .  $row["_desc"] . '</p>' . '</div>';
          
              
            }
    
    <!--Here I am trying when user click on edit button it should
     change that div to editable textarea so user can edit
      and save it or delete the whole div-->
   
     echo '<button onClick="editName()" class="btn btn-info"> 
      Edit</button>';
        echo '<a href="deleteUserInfo.php?edit= '. 
       $row["id"].'"class="btn btn-danger ">Delete</a>';
    
           
        }
        echo '</div>';
    }
    listFolderFiles($image, $username);
    
   
    ?>
      <script>



function editName() {
    console.log("calling");
    var divName = $("grid").html(); 
    console.log(divName); //value is undefined here
    var editableName = $("<textarea />");
    editableName.val(divName);
    $("grid").replaceWith(editableName);
    editableName.focus();
    editableName.blur(saveName);

}

function saveName() {
    var htmlName = $(editableName).html();
    var viewableText = $("<div>");
    viewableText.html(htmlName);
    $(editableName).replaceWith(viewableText);

    $(viewableText).click(editName);
}

</script>  
    
    
    </body>
    </html>

Answer 1

When the user clicks the edit button, set the contenteditable attribute to true on the target element and set the focus to that element.

function editName() {
    $("grid").attr("contenteditable", true);
    $("grid").focus();
    $("grid").blur(saveName);
}

Answer 2

It is quite simple, you should use contenteditable attribute available and set that value to true. This will make the div element editable.

Like this,

 <div class="grid" contenteditable="true">I am editable!</div>

In your case, you should use a function to select the element and set the attribute to true. And for the div element on clicking the type='file' input tag, you can write function that will delete the file that is previously uploaded and upload the new file. I would recommend you to research before posting a question in the community as you might get negative impacts on such questions. Hope it helps! Happy coding!!