使用Jquery Issue垂直重新排序Divs

在我把最后一根头发扯掉之前，我是在万不得已的情况下问的。目前我正在展示一个初始的2个div。然后，用户可以根据需要多次在原始div下面添加这两个div。如果需要，他们也可以移除2个div。我正试图允许使用拖放重新调用div。我试过很多方法，但就是不能奏效。另外需要注意的是，一旦用户拖放，div就需要重新索引自己。这是我的密码。在确定这个基本实现之前，请考虑到我已经添加和删除了很多代码尝试。提前谢谢。

加载JQuery

向最终用户显示第一个div

            <!--Div contains each answer step-->
            <div id = "answerswer_step" class = "answerswer_step">
                <!--This placeholder text is styled from CSS and will empty the div once the user starts typing-->
                <div id="answerswer_step_equation0" class="answerswer_step_equation" contenteditable="true" placeholder="Enter The Next Solution Step This Question"></div>
                <div id="answerswer_step_description0" class = "answerswer_step_description" contenteditable="true" placeholder="Enter A Description as to how this step was reached or how to solve the next step"></div>
            </div>
        </div>
<!-- Buttons to dynamically add and remove answer divs. The remove functionality is added in JQuery for the add button-->
        <button id="add_answer_step_button" class="add_answer_step_button">+ Add next Step</button>

这段代码附加了新的div。我必须像上面那样把三个div放在一个div中，但我无法让它工作。

<!--Script to append/remove div when user clicks on add_answer_step_button-->
<script type = "text/javascript" language = "javascript">
    $(document).ready(function() {
        <!--This variable gives each new set of answer divs a unique id by appending a number to the end of th id-->
        <!--The first set of answer divs will have an id of zero-->
        var answer_identifier_number = 1;
        $("button.add_answer_step_button").click(function () {
            $("div.answer_steps").append('<div id="answerswer_step_equation' + answer_identifier_number + '" class="answerswer_step_equation" contenteditable="true" placeholder="Enter The Next Solution Step This Question"></div>');
            $("div.answer_steps").append('<div id="answerswer_step_description' + answer_identifier_number + '" class = "answerswer_step_description" contenteditable="true" placeholder="Enter A Description as to how this step was reached or how to solve the next step"></div>');
            $("div.answer_steps").append('<button id="remove_answer_step_button' + answer_identifier_number + '" class = "remove_answer_step_button">- Remove This Step</button>');
            answer_identifier_number++;
        });
    });
</script>

允许div可拖动

<script type = "text/javascript" language = "javascript">
$(function() {  
    $( "#answer_steps" ).sortable();
    $( "#answer_steps" ).disableSelection();
    cursor: move;
});
</script>

我还没想好如何重新命名，但我有这方面的经验，所以我应该没事。谢谢你的帮助。