apply event only on single class with same class in multiple container : I am trying to creating my own read More/less function for comments. 
[ReadMore ReadLess Image][1].

During developing this, I followed by a problem. 
Suppose, I have  3 comments(**see first Image**) with more than 500 chars. In these comments all/full text is not shown, so i add *ReadMore* Links to read all comment. Show Only that class where i clicked..

Problem : When i click on one of these links *ReadMore* 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

 My jsBin : https://jsbin.com/waqoror/1/edit?html,js,console,output


Paste my Snippet also here Now
<!-- begin snippet: js hide: true -->

<!-- language: lang-js -->

    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 < minCharLength; i++) {
        totLength += txt[i];
        //console.log("["+i+"] "+totLength);
      }
      if (txt.length >= (minCharLength + 50)) {
        startupCont += "<span class='yughi501 _po2075 tetb_apndShw umoriRut' style='display:inline-block'> " + totLength +
          " <span>" +
          "<a href='#' onclick='ReadMoreLess()' class='txb_rdM _d1e301 _oijd51 _pedu' style='display:inline-block'> " +
          readM +
          "</a>" +
          "</span>" +
          "</span>";

        hiddenContent = "<span class='yughi411 _po21075 _umori120Rut tetb_apndhd' style='display:none'> " + txt +
          " <span>" +
          "<a href='#' onclick='ReadMoreLess()' class='txb_rdL  _pedu'> " +
          readL +
          " </a>" +
          "</span>" +
          "</span>";
        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);
    });

<!-- language: lang-css -->

    .txt{width:300px;height:150px;resize:none}

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    <textarea class="txt" id="tt">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.</textarea><br/>
    <button class="apndbtn">Append</button>
     <div class="dclr"></div>
    </body>
    </html>

<!-- end snippet -->

 I tried My best to explain my problem. I hope you will understand.

Ty In advance and used your time on my problem.
  [1]: http://i.stack.imgur.com/A2xUQ.png