Greetings everyone, I'm making a BB Code Parser but I'm stuck on the JavaScript front. I'm using jQuery and the caret library for noting selections in a text field. When someone selects a piece of text a div with formatting options will appear.

I have two issues.
Issue 1. How can I make this work for multiple textfields? I'm drawing a blank as it currently will detect the textfield correctly until it enters the

$("#BBtoolBox a").mousedown(function() { }

loop. After entering it will start listing one field after another in a random pattern in my eyes.

!!! MAIN Issue 2. I'm guessing this is the main reason for issue 1 as well. When I press a formatting option it will work on the first action but not the ones afterwards. It keeps duplicating the variable parsed. (if I only keep to one field it will never print in the second)

Issue 3 If you find anything especially ugly in the code, please tell me how to improve myself.

I appriciate all help I can get. Thanks in advance

$(document).ready(function() {
    BBCP();
});

function BBCP(el) {
    if(!el) { el = "textarea"; }
    // Stores the cursor position of selection start

    $(el).mousedown(function(e) {
    coordX = e.pageX;
    coordY = e.pageY;

    // Event of selection finish by using keyboard
    }).keyup(function() {
        BBtoolBox(this, coordX, coordY);

    // Event of selection finish by using mouse
    }).mouseup(function() {
        BBtoolBox(this, coordX, coordY);

    // Event of field unfocus
    }).blur(function() {
        $("#BBtoolBox").hide();

    });

}

function BBtoolBox(el, coordX, coordY) {
    // Variable containing the selected text by Caret
    selection = $(el).caret().text;
    // Ignore the request if no text is selected
    if(selection.length == 0) {
        $("#BBtoolBox").hide();
        return;
    }
    // Print the toolbox
    if(!document.getElementById("BBtoolBox")) {
        $(el).before("<div id=\"BBtoolBox\" style=\"left: "+ ( coordX + 5 ) +"px; top: "+ ( coordY - 30 ) +"px;\"></div>");
        // List of actions
        $("#BBtoolBox").append("<a href=\"#\" onclick=\"return false\"><img src=\"./icons/text_bold.png\" alt=\"B\" title=\"Bold\" /></a>");
        $("#BBtoolBox").append("<a href=\"#\" onclick=\"return false\"><img src=\"./icons/text_italic.png\" alt=\"I\" title=\"Italic\" /></a>");

    } else {
        $("#BBtoolBox").css({'left': (coordX + 3) +'px', 'top': (coordY - 30) +'px'}).show();
    }

    // Parse the text according to the action requsted
    $("#BBtoolBox a").mousedown(function() {
        switch($(this).children(":first").attr("alt"))
        {
            case "B": // bold
                parsed = "[b]"+ selection +"[/b]";
                break;
            case "I": // italic
                parsed = "[i]"+ selection +"[/i]";
                break;
        }

        // Changes the field value by replacing the selection with the variable parsed
        $(el).val($(el).caret().replace(parsed));
        $("#BBtoolBox").hide();
        return false;
    });
}