jquery不适用于每个href元素

Question

1. when first "read more" href click, div changed.first click it span and when second click it shrink.
2. But it is not work for other href element

3. how to solve this problem.please help me.

    <script>
        $(document).ready(function(){
            $('#more').click(function(){
               var toggleheight = $("#readmore").height() == 500 ? "100px" : "500px";
                     $('#readmore').animate({ height: toggleheight });
                     });
              });
   
        </script>
   

4. here is the php code

        <?php
         mysql_query("SET NAMES 'utf8'");
         $set_news=mysql_query("SELECT solution_date,Category,solution FROM solution ORDER BY solution_date DESC LIMIT 10",$connection);
           if(!$set_news){
           die("database query failed".mysql_error()); 
                           }
   
                           for($i=1;$i<=10;$i++) {
                           $rowofnews=mysql_fetch_array($set_news);
   
                           $category=$rowofnews['Category'];
                           $solution=$rowofnews['solution'];
   
                           echo ('<li>');
                           echo ('<div id="readmore"');
                           echo('<h2>');
                           echo $category;
                           echo('</h2><p>');
                           echo $solution;
                           echo('</p></div>');
                           echo('<p><span><a href="#" class="more" id="more">Read More</a></span></p></li>');
                           }
           ?>
   

Answer 1

If you're trying to select multiple elements, you shouldn't use ID's, you should select by class, like this:

$('.more').on("click", function(){