I am making an algorithm builder and have a main text box on top,

Question

0

Asked: May 31, 20262026-05-31T23:05:01+00:00 2026-05-31T23:05:01+00:00

I am making an algorithm builder and have a main text box on top,

0

I am making an algorithm builder and have a main text box on top, when I click the “+” underneath it, It adds a copy of itself to the next row. If there’s already a row there, it adds it to that row. The problem is I don’t want to just add it to the next row, I want it to be position centered under the one that I pressed the “+” symbol. Someone please take a look at my code and give me some suggestion on how i can fix this. Thank you so much.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Pathway Builder</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <div id="pathway_builder">
        <div class="row" id="row1">
            <div class="whole">
                <div class="centered_box">
                    <textarea class="text_field_not_selected"></textarea>
                </div>
                <input type="button" value="+" class="add_child not_visable" />
            </div>
        </div>
    </div>

    <script src="jQuery.js" type="text/javascript"></script>
    <script src="selectors.js" type="text/javascript"></script>
</body>
</html>

javaScript/jQuery

$('textarea').live('focusin blur', function() {
    $(this).toggleClass('text_field_not_selected');
});

$('.whole').live('mouseenter mouseleave', function() {
    $(this).find('.add_child').toggleClass('not_visable');
});


$(document).ready(function() {
    $('.add_child').live({
        click: function() {
            var new_row = '<div class="row"></div>'
            var new_child = '<div class="whole"><div class="centered_box"><textarea class="text_field_not_selected"></textarea></div><input type="button" value="+" class="add_child not_visable" /></div>'
            if ($(this).parents('.row').next().length == 0) {
                $(this).parents('.row').after(new_row);
                $(this).parents('.row').next().html(new_child).css('position-x', '');
            } else {
                $(this).parents('.row').next().append(new_child);
            }
        }
    });
});

CSS

body {
    margin: 0px;
    padding: 0px;
    text-align: center;
}
textarea {
    width: 4em;
    height: 1em;
    overflow: hidden;
}

textarea:focus {
    outline:  none;
    text-align: center;
    resize: both;
    padding-top: 5px;
    padding-bottom: 5px;
}
.text_field_not_selected {
    text-align: center;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0px 3px 5px #444;
    -moz-box-shadow: 0px 3px 5px #444;
    -webkit-box-shadow: 0px 3px 5px #444;
    resize: none;
}
.pathway_builder {
    text-align: center;
}
.whole {
    text-align: center;
    display: inline-block;
    background-position-x: 100px;
}
.centered_box {
    padding: 10px;
    padding-bottom: 0px;
}

.add_child {
}

.not_visable {
    visibility: collapse;
}
.row {

}