通过在php和ajax中单击其父标题，以弹出形式显示动态子值

I have multiple dynamic header something like below image. Every header contails its dynamic child value. when i will click on the header it will display only its child dynamic value in a popup form. I tried 'facebox' and bootstrap modal but can't happen anything. Anybody please solve this problem. thanks in advance. mentioned that child value is stored in the unordered list.

Structured of form which contains dynamic value something looks like this...

<ul>
<li>
  <h4>Sparkle</h4>
  <ul>
    <li><a href="#"> Item 1 </a></li>
    <li><a href="#"> Item 2 </a></li>
    <li><a href="#"> Item 3 </a></li>
    <li><a href="#"> Item 4 </a></li>
  </ul>
</li>
<!-- This is the list item that is open by default -->
<li class="active">
  <h4>IDG</h4>
  <ul>
    <li><a href="#"> Item 1 </a></li>
    <li><a href="#"> Item 2 </a></li>
    <li><a href="#"> Item 3 </a></li>
    <li><a href="#"> Item 4 </a></li>
  </ul>
</li>
<li>

you can do something like this and change according to your need

<ul id="column1">
       <li rel="1">Item 1</li>
       <li rel="2">Item 2</li>
       <li rel="3">Item 3</li>
       <li rel="4">Item 4</li>
    </ul>

<script>
    $('ul li').each(function(i)
    {
       $(this).attr('rel'); // This is your rel value
    });
</script>

<ul>
 <li>
  <a href="#myDiv" class="various">Sparkle</a>
   <ul id="myDiv" style="display:none">
    <li><a href="#"> Item 1 </a></li>
    <li><a href="#"> Item 2 </a></li>
    <li><a href="#"> Item 3 </a></li>
    <li><a href="#"> Item 4 </a></li>
   </ul>
 </li>
<li>
 <a href="#myDivv" class="various">IDG</a>
  <ul id="myDivv" style="display:none">
   <li><a href="#"> Test 1 </a></li>
   <li><a href="#"> Test 2 </a></li>
   <li><a href="#"> Test 3 </a></li>
   <li><a href="#"> Test 4 </a></li>
  </ul>
</li>

<script type="text/javascript">
$(document).ready(function(){       
$(".various").fancybox({
maxWidth      : 800,
maxHeight     : 600,
fitToView     : false,
width           : '70%',
height        : '70%',
autoSize      : false,
closeClick  : false,
openEffect  : 'none',
closeEffect : 'none',
autoScale: false,
padding: 0,
closeClick: false,

beforeLoad: function () {
  var url = $(this.element).attr("id");
  this.href = url
}
});

});
</script>