使用数组将动态添加的 li 和 ul 元素保存到数据库

Question

I'm trying to build a User interface of an application where user could add ul and li element when clicking on add question, I successfully managed to develop the front end part here's a preview:

but the problem is when saving this to the database which is so overwhelming I'm stuck at this, is there any way to save the data to an array so I can display them with php, any idea is welcomed.

here's the jquery code:

wrapper.on("click", "button", function(e){ 
        e.preventDefault();
        var parent = $(this).parent().parent().parent().parent().parent().parent();
        var parentID  = $(this).attr('element-id');
        var elementID = 1000000000000000000*Math.random();
        parentIDs.push(elementID);
        if($(this).attr('class') == "add_field_button btn btn-success"){
           if(parent.find('ul').length){
            parent.find('ul').first().append(`
            <li>
              <div class="panelcb white-box">
                    <div class="form-horizontal form-material">
                    <div class="form-group">
                  <label class="col-md-12">Question</label>
                    <div class="col-md-12">
                            <input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-12">Response</label>
                        <div class="col-md-12">
                            <input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
                    </div>
                    <div class="form-group">
                  <div class="row">
                    <div class="col-sm-4">
                        <button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
                    </div>
                    <div class="col-sm-4">
                        <button class="delete_field_button btn btn-error" >Delete</button>
                    </div>
                  </div>
                </div>
                    </div>
                  </div>
            </li>`); 
           }else{
            $(this).closest('li').append(`
            <ul><li>
              <div class="panelcb white-box">
                <div class="form-horizontal form-material">
                  <div class="form-group">
                      <label class="col-md-12">Question</label>
                      <div class="col-md-12">
                          <input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
                  </div>
                  <div class="form-group">
                      <label class="col-md-12">Response</label>
                      <div class="col-md-12">
                          <input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
                  </div>
                  <div class="form-group">
                  <div class="row">
                    <div class="col-sm-4">
                        <button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
                    </div>
                    <div class="col-sm-4">
                        <button class="delete_field_button btn btn-error" >Delete</button>
                    </div>
                  </div>
                </div>
                </div>
              </div>
            </li></ul>`); 

            }
       }else if($(this).attr('class') == "delete_field_button btn btn-error"){
        parent.remove();
       }

Thanks is advance.

Answer 1

Well...

If the whole user-interative-area, I'd call a playground, can be put inside a container:

<div id='playground'>

.. all the ul's and li's..

</div>

And if you've got a form or something else:

<form action='/' id='form-playground' method='post'>
   <textarea id='playground-container' name='playground' class='hidden'> 
   </textarea>
   <input type='submit' value='Save My Playground'>
</form>

Then on submit you can copy the contents of the the playground to a hidden textarea:

$(document).ready(function () {
    $('#form-playground').on('submit', function () {
        $('#playground-container').html($('#playground').html());
        return true;
    });
 });

Or perhaps an AJAX post:

$.post( PostUrl, { playground: $('#playground').html() } );