تغییر المان مربوطه

سلام دوستان من در یک حلقه چند تا div رو ایجاد میکنم و یک دکمه ادامه مطلب دارم که ادامه مطلب رو نشون بده حالا به این مشکل خوردم که وقتی روی دکمه مروبط به هر متن کلیک می شه متن اولی رو ادامش نشون می ده باید با this چجوری کاری کنم همون المان مورد نظر تغییر کنه؟؟

<div style="margin-top: 100px ; margin-bottom: 100px;overflow: hidden;display:block;background-color: #f2f2f2;border-style: solid;border-color: #e7e7e7;border-top-left-radius: 20px; border-top-right-radius: 20px ; width: 70% ;margin:auto auto;height: fit-content" class="center">
    <span class="center" style="font-size: 35px;margin-top: 4px"><?=$tit?></span>
    <div style="background-color: #e7e7e7;height: 1px;margin-top: 4px"></div>
    <span id="desshow" class="right show" style="overflow: hidden;max-height:300px;font-size: 25px ; text-align: right;margin-right: 4px;margin-top: 4px"><?=$des?></span><br><br><br><br>
    <div style="display: inline">
        <span class="right"style="direction:rtl;font-size: 20px ;margin-top: 10px">نویسنده : <?=$fname?> | تاریخ انتشار : <?=jdate($record['data'] , "Y/m/d")?></span>
       /*خط مربوط به کدهای جاوا اسکریپت*/ <span id="readmore" onclick="readmore(this)" class="left btn-blue" style="margin-left: 4px ;font-size: 22px">ادامه مطلب</span>
    </div><br><br><br>
</div>

function readmore(sender) {
    sender = $(sender);
     var height = sender.document.getElementById('desshow');
    sender.style.maxHeight="3000px";
    if (height.style.maxHeight === "3000px"){
        sender.document.getElementById('desshow').style.maxHeight = "300px";
        sender.document.getElementById('desshow').style.overflow = "hidden";
        alert('b');
    }else {
        sender.document.getElementById('desshow').style.maxHeight = "3000px";
        sender.document.getElementById('desshow').style.overflow = "visible";
        alert('a');
    }
}