Before I completely lose my mind, I need some help with a coding issue. Right now, I have two initial divs displayed. The user should be able to add these divs below the original ones as many times as they want, or remove them if needed. I've been attempting to allow for the reordering of these divs using drag and drop functionality, but nothing seems to be working. Additionally, once the user drags and drops the divs, they need to reindex themselves. Below is the code that I currently have. Keep in mind that I tried and failed with numerous other methods before arriving at this basic implementation. Your assistance is greatly appreciated.
Loading JQuery...
Displaying the first div to the end-user...
<!--Div contains each answer step-->
<div id = "answer_step" class = "answer_step">
<!--This placeholder text is styled from CSS and will empty the div once the user starts typing-->
<div id="answer_step_equation0" class="answer_step_equation" contenteditable="true" placeholder="Enter The Next Solution Step This Question"></div>
<div id="answer_step_description0" class = "answer_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>
This code appends the new divs within a parent div. However, I'm struggling to achieve proper functionality.
<!--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 the 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="answer_step_equation' + answer_identifier_number + '" class="answer_step_equation" contenteditable="true" placeholder="Enter The Next Solution Step This Question"></div>');
$("div.answer_steps").append('<div id="answer_step_description' + answer_identifier_number + '" class = "answer_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>
Enabling draggable functionality for the divs...
<script type = "text/javascript" language = "javascript">
$(function() {
$( "#answer_steps" ).sortable();
$( "#answer_steps" ).disableSelection();
cursor: move;
});
</script>
I still need to figure out how to reindex the names, but I believe I can handle that part. Thank you for your assistance so far.