我想仅使用一个 jquery 在同一页面中使多个阅读更多和阅读更少按钮。当我点击阅读更多按钮时，它会显示一些内容，并在段落末尾显示阅读更少按钮。我完成了我的第一步。一页中有三个阅读按钮。一个运行良好，但其他两个不起作用。请给出一些建议。
$(document).ready(function() {
$("#toggle").click(function() {
var elem = $("#toggle").text();
if (elem == "Read More") {
$("#toggle").text("Read Less");
$("#text").slideDown();
} else {
$("#toggle").text("Read More");
$("#text").slideUp();
}
});
});#text{
display:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-section uk-section-small uk-section-default">
<div class="uk-container">
<h2 class="heading-primary uk-text-center "><span>Guide</span></h2>
<div class="uk-grid-divider uk-child-width-expand uk-margin-medium-top uk-margin-mediumm-bottom" uk-grid>
<div>
<div class="uk-text-left" uk-grid>
<div class="uk-width-1-4@s uk-text-center">
<img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
</div>
<div class="uk-width-3-4@s">
<h1 style="display: inline">Name</h1><h2 style="display: inline; font-style: italic;">(Designation)</h2>
<p …