html - jQuery loop works once -

I have a loop that I have created, this is the first time that I try to build a loop using jQuery Is of It's a simple Read more / less button.

The problem I have is strange when the page loads first, then it works perfectly, but at any time after this, it triggers the whole thing without considering the ID change is.

HTML:

  & lt; Div class = "inner container" id = "tag_info" & gt; & Lt ;? Php? & Gt; & Lt; / Div & gt; & Lt; An id = "read_more" & gt; Read more & gt; & Lt; / A & gt;   
 jquery:  
  $ ('a # read_more'). Click (function () ($ ('# tag_info'). Stop () $ (this :); $ (this) .removeAttr ('id'); $ (this) .attr ('id $ (' A_read_less' ). $ ('A # read_less'). (Function () {$ ('# tag_info'), stop (). Animate ({height: '50px'}, 500); $ (this) .text ( 'Read more'); $ (this) .removeAttr ('id'); $ (this) .attr ('id', 'read_more');});});   
 CSS: [no need for anchor genres]  
  #tag_info {altitude: 50px; hidden slug;}   
 what happens (for the first time At any time after that), the div will have to be instantly installed in the first click function, and then the other Jump back to set height in click.  
 If I separate them into two different click functions, then the other does not work. The most confusing thing is that it works once, then right Any suggestion that fails to work from?   
 
 
 If you want to change the id dynamically Then use the event delegation.  <('Height' '100%') Click ('click', '# read', function () {$ ('# Tag_info'). 500); $ (This) .text ('& lt; read less'). Attr ('id', 'read_out');}); $ ('Body') ('Height' '50px', 500); $ (this) .text ('Read more') ('Click', '# read_less', function () {$ ('# tag_info'). ;). Attr ('id', 'read_more');});   
 is binding when you delegate to force a static parent element in the DOM. This will handle the event, because they will bubble with your dynamic ID.