Display Dynamic child Value in a popup form by clicking its parent header in php and ajax

Question

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>

Answer 1

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>

Answer 2

<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>