Change HTML on click

my problem on this read more button is, that when I close it by click on the #test_001 or #test_002 the read more button stays on: “read less” how do I change this ?

$("#readmore_01").click(function(e){
     e.preventDefault();
    $("#test_001").toggle("fast");
    window.scrollTo(170, 170);
    let name = $(this).html();
    $(this).html("Read less");
    if(name == "Read less"){
        $(this).html("Read more");
    }

 });

$("#readmore_02").click(function(e){
     e.preventDefault();
    $("#test_002").toggle("fast");
    window.scrollTo(550, 550);
    let name = $(this).html();
    $(this).html("Read less");
    if(name == "Read less"){
        $(this).html("Read more");
    }

 });

$("#test_001").click(function(e){
     e.preventDefault();
    $("#test_001").toggle("fast");
    window.scrollTo(170, 170);


 });

$("#test_002").click(function(e){
     e.preventDefault();
    $("#test_002").toggle("fast");
    window.scrollTo(550, 550);

 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="content_01">
    <div>Hi guys that's a test</div>
    <p id="test_001" style="display:none">Test</p>
    <div class="toggleBtn_01">
         <i class="fa fa-plus" id="readmore_01">Read more</i>
    </div>
</div>
<div class="content_02">
    <div>Hi guys that's a test</div>
    <p id="test_002" style="display:none">Test</p>
    <div class="toggleBtn_02">
    <i class="fa fa-plus" id="readmore_02">Read more</i>
    </div>
</div>

Answer

Your problem is in your test_00# function calls.

When you click on the Test text, it calls the test_00# functions which have no logic to update the Read more/less buttons.

Add the following line in your test_00# functions to update when clicking the “Test” text.

document.getElementById("readmore_01").innerHTML = "Read more"

$("#readmore_01").click(function(e){
     e.preventDefault();
    $("#test_001").toggle("fast");
    window.scrollTo(170, 170);
    let name = $(this).html();
    $(this).html("Read less");
    if(name == "Read less"){
        $(this).html("Read more");
    }

 });

$("#readmore_02").click(function(e){
     e.preventDefault();
    $("#test_002").toggle("fast");
    window.scrollTo(550, 550);
    let name = $(this).html();
    $(this).html("Read less");
    if(name == "Read less"){
        $(this).html("Read more");
    }

 });

$("#test_001").click(function(e){
     e.preventDefault();
    $("#test_001").toggle("fast");
    window.scrollTo(170, 170);
    
    document.getElementById("readmore_01").innerHTML = "Read more"
 });

$("#test_002").click(function(e){
     e.preventDefault();
    $("#test_002").toggle("fast");
    window.scrollTo(550, 550);

    document.getElementById("readmore_02").innerHTML = "Read more"
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="content_01">
    <div>Hi guys that's a test</div>
    <p id="test_001" style="display:none">Test</p>
    <div class="toggleBtn_01">
         <i class="fa fa-plus" id="readmore_01">Read more</i>
    </div>
</div>
<div class="content_02">
    <div>Hi guys that's a test</div>
    <p id="test_002" style="display:none">Test</p>
    <div class="toggleBtn_02">
    <i class="fa fa-plus" id="readmore_02">Read more</i>
    </div>
</div>