Question: I have 36 boxes where you hover over the title and it slides up to show the hidden text below it, whilst it works as expected the problem is all 36 boxes slide up at the same time instead of just the one you moused over here is the script I am using:

```
$(document).ready(function() {
    $('.caption').mouseenter(function(){
        $('.caption').stop().animate({height: "60%"});
    }); 

    $('.box').mouseleave(function(){
        $('.caption').stop().animate({height: "8%"},  1000, function() {
        });
    });
});

```

Now after much reading I found that I need to use "this" so I tried this:

```
$(document).ready(function() {
    $('.caption').mouseenter(function(){
        $('.caption', this).stop().animate({height: "60%"});
    }); 

    $('.box').mouseleave(function(){
        $('.caption', this).stop().animate({height: "8%"},  1000, function() {
        });
    });
});

```

However that just disables the animation altogether, I tried using ".next" also and many other combinations that just resulted in the animation being disabled also.

In short, I have 36 boxes and I only want the actual one you mouse over to slide up not all of them at the same time.

I am a total jQuery novice and have searched for hours but cannot find a working example of exactly what I wish to achieve. Help is greatly appreciated.

Answer: 
Before anything I would like to refer to all the markdown editors out there: <https://www.google.de/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=javascript%20markdown%20library>

So: do not try to reinvent the the wheel, and so on.

But for the sake of learning, my approach would look like this:

```
function toggleMarker(marker, el) {
var markerLength = marker.length;
var startPos, endPos, selection, range;

if (document.selection != undefined) { // IE
    el.focus();
    range = document.selection.createRange();
    selection = range.text;
} else if (el.selectionStart != undefined) { // Firefox
    startPos = el.selectionStart;
    endPos   = el.selectionEnd;
    selection = el.value.substring(startPos, endPos);
}

if (!selection.length){
        return;
}

if (el.value.substring(startPos-markerLength,startPos) === marker
        && el.value.substring(endPos,endPos+markerLength) === marker
){
        el.value = el.value.substring(0,startPos-markerLength) +
                            selection + 
              el.value.substring(endPos+markerLength);
}
else{
        el.value = el.value.substring(0,startPos) + marker + 
                            selection + marker + el.value.substring(endPos);
}

}

$(document).on('mousedown', 'button', function(e) {
  toggleMarker( $(this).data('marker'), $('#txtarea').get(0) ).text;
});

```

See it in action: <https://jsfiddle.net/t4ro53v8/4/>

The solution takes a very generic approach: the marker to toggle is set as a custom data attribute to make it easy to reuse the code.

The functionality is only implemented for the non-IE case. You will have to check, how to determine startPos and endPos for a range in IE.

In all other browsers:

1. the selection is identified
2. nothing is done if nothing is selected
3. sourroundings of the selection are checked against the given marker
4. if both markers are present, they get deleted
5. otherwise the markers are inserted

As a proof of concept this example works like a charm.
But there are some shortcomings:

* How to distinguish between bold text(\*\*) and italics(\*)?
* How to handle markers that just appear just on one side of the selection
* What to do, if a marker is selected?

But that is for you to solve now ...
You could use regex to find the occurance of a \*\* \*\* pattern.This regex will help you find the pattern similar to what you have. 

`[*][*][a-z]*[*][*]` .

Using the `exec()` method, will help you extract that particular text.

Check the length of this using `.length`, if it is 4, then there is nothing in between, and you can replace it with the new text surrounded by `**`,

`"**"+ newtext+"**"`

For removing the \*\*, you can use the `replace()` method, where you replace `**` with whitespace or so.