title: Trying to apply an event on single class Jquery or js
body: <p>I am trying to creating my own read More/less function for comments.
  <a href="https://i.stack.imgur.com/A2xUQ.png" rel="nofollow noreferrer">ReadMore ReadLess Image</a>.</p>
  <p>During developing this, I followed by a problem.
  Suppose, I have  3 comments(<strong>see first Image</strong>) with more than 500 chars. In these comments all/full text is not shown, so I add <em>ReadMore</em> Links to read all comment. Show Only that class where I clicked..</p>
  <p>Problem : When I click on one of these links <em>ReadMore</em> its shows me all three comments with full text Instead to show me only clicked class text.
  Problem Image: img.ctrlv.in/img/16/03/12/56e4110ccb82d.png</p>
  <p>My jsBin : <a href="https://jsbin.com/waqoror/1/edit?html,js,console,output" rel="nofollow noreferrer">https://jsbin.com/waqoror/1/edit?html,js,console,output</a></p>
  <p>Paste my Snippet also here Now
  <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function mangeText(text) {
    var minCharLength = 50;
    var readL ="Read Less";
    var readM = "Read More";
    var txt = text,
      txtLength = 0,
      totLength = "";
    var startDisplayText = "",
      startupCont = "",
      hiddenContent = "";
    txtLength = txt.length;
    for (var i = 0; i &lt; minCharLength; i++) {
      totLength += txt[i];
      //console.log("["+i+"] "+totLength);
    }
    if (txt.length &gt;= (minCharLength + 50)) {
      startupCont += "&lt;span class='yughi501 _po2075 tetb_apndShw umoriRut' style='display:inline-block'&gt; " + totLength +
        " &lt;span&gt;" +
        "&lt;a href='#' onclick='ReadMoreLess()' class='txb_rdM _d1e301 _oijd51 _pedu' style='display:inline-block'&gt; " +
        readM +
        "&lt;/a&gt;" +
        "&lt;/span&gt;" +
        "&lt;/span&gt;";
  
      hiddenContent = "&lt;span class='yughi411 _po21075 _umori120Rut tetb_apndhd' style='display:none'&gt; " + txt +
        " &lt;span&gt;" +
        "&lt;a href='#' onclick='ReadMoreLess()' class='txb_rdL  _pedu'&gt; " +
        readL +
        " &lt;/a&gt;" +
        "&lt;/span&gt;" +
        "&lt;/span&gt;";
      txt = startupCont;
      txt += hiddenContent;
    }
    return txt;
  }
  
  function ReadMoreLess(){
              
              if($(".tetb_apndhd").css("display") == "none"){
                  console.log("IF");
                  $(".tetb_apndhd").css({"display":"inline-block"});
                  $(".tetb_apndShw").css({"display":"none"});
              }else if(($(".tetb_apndhd").css("display") == "inline-block")){
                  console.log("ELSE IF");
                  $(".tetb_apndShw").css({"display":"inline-block"});
                  $(".tetb_apndhd").css({"display":"none"});
              }
          }
  
  $(".apndbtn").click(function (){
      var txt = mangeText($(".txt").val());
      $(".dclr").append(txt);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.txt{width:300px;height:150px;resize:none}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://code.jquery.com/jquery-1.11.3.js"&gt;&lt;/script&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;textarea class="txt" id="tt"&gt;Etiam vitae faucibus urna. Cras in enim ac eros cursus euismod. Aenean tristique arcu eu quam pharetra rutrum. Proin tincidunt magna at nibh tristique, eu finibus ipsum ultricies. Nunc eget lorem ac diam dictum condimentum. Vestibulum eu nisi a lorem ornare finibus.&lt;/textarea&gt;&lt;br/&gt;
  &lt;button class="apndbtn"&gt;Append&lt;/button&gt;
   &lt;div class="dclr"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>