Toggle new div with jQuery on sibling

[greencode]

I have the following code…

<ul class="ppl clearfix">
<li class="bl">
<div class="image">
<div class="amt">22</div>
<img src="images/ph-image.jpg" alt="" />
</div>
</li>
<li class="bl">
<div class="image">
<div class="amt">4</div>
<img src="images/ph-image.jpg" alt="" />
</div>
</li>
</ul>

And then I'm trying to add a new div on click of the ".bl" div. What I have below works well but adds and removes the div to both of the li's I have above. I'm presuming I need to do something like sibling or closest but can't figure out where this needs to go in the code.

$(function(){
var NewContent='<div class="selected"></div>'
$(".bl").one('click', function(){
var $content = $(NewContent).insertAfter('.amt');
$(this).click(function(){
$content.toggle();
});
});
});

Any help or ideas would be greatly appreciated.

[Fotiman]

$(function () {
  var NewContent = '<div class="selected"></div>'
  $(".bl").one('click', function () {
    var $this = $(this),
      $content = $(NewContent);
    $this.find('.amt').after($content);
    $this.click(function () {
      $content.toggle();
    });
  });
});

[greencode]

You are a genius! Thanks so much for this, really appreciated

[Fotiman]

No problem. :) Glad to help.