Why the ajax response code is not appending properly?

Question

I've following HTML code:

<form name="package_type_documents"  action="" method="post" enctype="multipart/form-data">
    <input type="hidden" name="op" id="op" value="edit"/>
    <input type="hidden" name="pt_id" id="pt_id" value="5"/>
    <input type="hidden" name="form_submitted" value="yes"/>
    <div class="hor-form w33">

    </div>
    <div class="hor-form">    
      <ul>
        <li>
          <div class="answer-block" id="doc_title">
            <a href="#" class="c-gray-btn c-add-btn" name="add_more_title" id="add_more_title" onclick="add_title(); return false;"><span>Add More Documents</span></a>
            <ol>
                                          <li id="ttl1" class="ptdoc">
                <li class="ans_li">
                  <span class="num-block">1&nbsp;</span><span class="num-block reqd">*</span>
                  <label>Document Title</label>
                  <input type="text" name="pt_doc_title[1]" id="pt_doc_title_1" value="Prabhakar Bhosale" />
                </li>
                <li class="ans_li">
                  <span class="num-block">&nbsp;&nbsp;</span><span class="num-block reqd">&nbsp;</span>
                  <label>Document File</label>
                  <p class="uploadBtn"><input type="file" name="document_file_name_1" id="document_file_name_1"/>
                  </p>
                </li>

                                                  <li class="ans_li">
                  <a href="package_type_documents.php?op=download&pt_id=5&pt_doc_id=19" style="font-size:small;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prabhakar_bhosale.docx</a>
                </li>                 
                                                                  <li class="ans_li">                
                  <input type="checkbox" name="delete_file_1" id="delete_file_1" class="custom-check" />
                  <label for="show">Delete document</label>
                </li>


                <input type="hidden" name="pt_doc_id[0]" value="19" />
                                  <input type="hidden" name="pt_doc_old_file_iname[0]" value="prabhakar_bhosale.docx" />  

              </li>
                                    </ol>
            <a href="#" class="c-gray-btn c-add-btn" name="add_more_title" id="add_more_title" onclick="add_title(); return false;"><span>Add More Documents</span></a>
            <p class="fade">Note * (Image size should be less then 1 mb and allowed image types are jpg, jpeg, gif, png .)</p>
          </div>         
        </li>       
        <li>          
          <p class="last">
            <input id="saveForm" class="c-btn" type="submit" name="submit" value="Update"/>
            <input type="button" class="c-gray-btn" name="back" value="Back" onclick="javascript:window.location.href='http://localhost/eprime/entprm/web/control/modules/package_type/view_package_type.php?page=1'" />
          </p>
        </li>
      </ul> 
    </div>
  </form>

Now following is the ajax function which I"m calling to append the data:

<script type="text/javascript">
function add_title() {  
  if($.active > 0) { //or $.active    
    request_inprogress();
  } else { 
    //var next_title_no = $('#doc_title div').size() + 1;    
    var title_no      = $('#doc_title .ptdoc').size() + 1;    
    // While loop is use to check that this id is already exists or not.
    /*while ($('#title'+title_no).length>0) { 
      title_no = title_no+1;
    }*/  
    $('#add_more_title').removeAttr('onclick');

    $.ajax({
      type: "POST",
      url: "package_type_documents.php",
      data: {'request_type':'ajax', 'op':'add_new_title', 'title_no':title_no},  
      success: function(data) {
          if(jQuery.trim(data)=="session_time_out") {
            window.location.href = site_url+'login.php?timeout=1';            
          } else { 
            $('#doc_title ol').append(data);
            $("#add_more_title").attr("onClick", "add_title();return false;");
          }           
        }
    });
  }
}
</script>

The PHP code to append the data is as follows:

<?php
$op=$request['op'];
switch($op) {

case 'add_new_title':
      $title_no = $request['title_no'];


      echo "<li id='ttl$title_no' class='ptdoc'>
              <li class='ans_li'>
                <span class='num-block'>$title_no&nbsp;</span>
                <span class='num-block reqd'>*</span>
                <label>Document Title</label>
                  <input type='text' name='pt_doc_title[$title_no]' id='pt_doc_title_$title_no' value='' class='inputfield' />
              </li>
              <span class='num-block'>&nbsp;&nbsp;</span>
              <span class='num-block reqd'>&nbsp;&nbsp;</span>
              <li class='ans_li'>
                <label>&nbsp;Document File</label>
                <p class='uploadBtn'>
                  <input type='file' name='document_file_name_$title_no' id='document_file_name_$title_no' />
                </p>
                <p class='custom-form'>
                  <a href='#' id='ttl$title_no' onclick=\"delete_title(this.id);return false;\" class='c-delete'>Delete</a>
                </p>
              </li>
            </li>";
      exit;
}
?>

My issue is the actual appended code is not as above. If I see in firebug console it's appending in following manner:

<li id="ttl2" class="ptdoc"> … </li><li class="ans_li"><span class="num-block">
      2 
    </span><span class="num-block reqd">
      *
    </span><label>
      Document Title
    </label><input id="pt_doc_title_2" class="inputfield" type="text" value="" name="pt_doc_title[2]"></input></li><span class="num-block"> … </span><span class="num-block reqd"> … </span><li class="ans_li"><label>
       Document File
    </label><p class="uploadBtn"><input id="document_file_name_2" type="file" name="document_file_name_2"></input></p><p class="custom-form"><a id="ttl2" class="c-delete" onclick="delete_title(this.id);return false;" href="#">
      Delete
    </a></p></li>

My issue is in the following line from above code:

<li id="ttl2" class="ptdoc"> … </li>

Actually, you can see from my PHP code that I'm not closing the li right after creation of it. I'm putting the data in the li and then closing it. Then why the li is getting closed right after creation of it in resulted HTML? Can anyone help me in this regard? Thanks in advance.

Answer 1

put ol or ul in li when you make it sub li if you not make its child by ol or ul then Browser append its respective close tag

Answer 2

this is because you cannot put li directly inside another li. You need to create a list under li first (ul or ol) or the browser will assume that you simply forgot about </li> and will close this tag for you