Implementing jquery read more & show less for dynamic li tags

In my code li tag is generated using php. It is dynamic , some times there may be more than 3 li tags , some times less than 3 li tags . In this case i have to show 'read more' and 'show less' when li tags are more than 3 .

JS

      $(document).ready(function(){

         var a = $(".bul5 li").length;

         if (a > 3)

         {

             $("ul li:nth-child(3)").append("<span class='readMore'> Read More...</span>");

         }

         for( i = 3; i<a; i++ )

         {

            $("li").eq(i).hide();

         }

         $('.readMore').click(function(event){      

            for( i = 3; i<a; i++ )

            {

               $("li").eq(i).show();

               $('this').hide();

            }

            $("ul li:nth-child("+i+")").append("<span class='showless'> Show Less...</span>");

            $('.showless').click(function(event){      

             for( i = 3; i<a; i++ )

             {

               $(this).hide();

                $("li").eq(i).hide();

                $('.readMore').show();

             }

            });

         });

       });

HTML

<ul class="bul5" style="font-size:13px;">

        <li>Samsung Galaxy Note 3 comes with <b>Android  v4.3 Jelly Bean OS</b>.</li>

        <li>It has a <b>1.9 GHz Octa Core Processor</b> and <b>3 GB RAM</b>.</li>

        <li>Samsung Galaxy Note 3 has <b>5.7 Inches Screen</b> with <b>Full HD Display</b>.</li>

        <li>It has a <b>13 MP Rear Camera</b> and <b>2 MP Front Camera</b>.</li>

        <li>Samsung Galaxy Note 3 has <b>3G</b> Connectivity.</li><li>It has <b>FM Radio</b>.</li>

        <li>The Phone is powered by <b>Li-ion 3200 mAh </b> standard battery with <b>Upto 21 hours</b> Talktime.</li>

     </ul>