Pass dynamically generated php variable to jquery function

Question

I am listing questions and answers(MCQ's) in a <ul> which are being displayed dynamically based on mysql results. After this I am providing a note section which opens up when user clicks on 'Add Notes' attached with each question. I want to save the notes written for each question by picking up the respective question id with each question. I am unable to obtain the particular question id associated with each question. From my code, all the question id is being displayed on console.log .

<?php if( $row['section'] == 2) {?> 
<ul class="list-group">         
          <li class="list-group-item active">
           <div class="radio noMargin" id="<?php echo $sectionOne ; ?>info"><?php echo $no ; ?> <span class="glyphicon glyphicon-arrow-right"></span></div><?php echo "<font color='pink'>Ques ID :[".$row['id']."]</font>";?><div class="question"><?php echo $row['question'] ; ?></div>

          <div style="float:right; margin-top:-20px;">

          Marks:<?php echo $row['marks'] ; ?></div></li>
<?php          
echo '<input type="hidden" name="question[]" id="questionId" value="'.$row['id'].'">';
echo '<input type="hidden" name="attempt" value="'.$attemptCount.'">';
echo '<input type="hidden" name="unit_id" value="'.$unit_id.'">';
echo '<input type="hidden" name="chapter_id" value="'.$chapter_id.'">';

$questionId     =   $row['id'] ;  

$sqO =$db->query("SELECT id, options from tbl_options_mock_question WHERE question_id = ".$questionId."");
while($rowO=mysql_fetch_array($sqO))
{
?>  
    <li class="list-group-item wrp_radio">
      <div class="radio noMargin">
        <label>
          <input disabled type="radio" class="checkedInfo" alt="<?php echo $no ; ?>" name="optionAns<?php echo $i ; ?>" value="<?php echo $rowO['id'] ; ?>">
          <?php echo $rowO['options'] ; ?></label>
      </div>
    </li>
<?php } ?>
<br>   
 <a class="click_notes"> <font size='2' color='blue'>&nbsp;&nbsp;&nbsp;Add Notes</font></a> 
<br>
<div class="demo"></div>    
</ul>        
<?php $i++;$no++; ?>
<?php } ?>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var id = '<?php echo $row['id'] ; ?>';
console.log(id);
 $('.click_notes').on('click',function(){
  $('.comment_form').hide();
   $(this).closest('ul').find('.demo').html("<div class='comment_form'><form action='#' method='post'><textarea cols ='50' class='span10' name='notes' rows='6'></textarea><br><input class='btn btn-primary' name= 'submit_notes' type='submit' value='Add Notes'></form><br></div>");
 });
});
</script>

Answer 1

As i explain in comment put every question's id one by one in tag's attribute. I made the following changes to your jQuery code.

1) I pick the question id from tag using jQuery's $(this).data('question-id); .

2) Then i add a hidden field of that question_id so that you can get the respective question id after form submission.

<?php if( $row['section'] == 2) {?> 
<ul class="list-group">         
          <li class="list-group-item active">
           <div class="radio noMargin" id="<?php echo $sectionOne ; ?>info"><?php echo $no ; ?> <span class="glyphicon glyphicon-arrow-right"></span></div><?php echo "<font color='pink'>Ques ID :[".$row['id']."]</font>";?><div class="question"><?php echo $row['question'] ; ?></div>

          <div style="float:right; margin-top:-20px;">

          Marks:<?php echo $row['marks'] ; ?></div></li>
<?php          
echo '<input type="hidden" name="question[]" id="questionId" value="'.$row['id'].'">';
echo '<input type="hidden" name="attempt" value="'.$attemptCount.'">';
echo '<input type="hidden" name="unit_id" value="'.$unit_id.'">';
echo '<input type="hidden" name="chapter_id" value="'.$chapter_id.'">';

$questionId     =   $row['id'] ;  

$sqO =$db->query("SELECT id, options from tbl_options_mock_question WHERE question_id = ".$questionId."");
while($rowO=mysql_fetch_array($sqO))
{
?>  
    <li class="list-group-item wrp_radio">
      <div class="radio noMargin">
        <label>
          <input disabled type="radio" class="checkedInfo" alt="<?php echo $no ; ?>" name="optionAns<?php echo $i ; ?>" value="<?php echo $rowO['id'] ; ?>">
          <?php echo $rowO['options'] ; ?></label>
      </div>
    </li>
<?php } ?>
<br>   
 <a class="click_notes" data-question-id="<?=$rowO['id']?>"> <font size='2' color='blue'>&nbsp;&nbsp;&nbsp;Add Notes</font></a> 
<br>
<div class="demo"></div>    
</ul>        
<?php $i++;$no++; ?>
<?php } ?>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var id = '<?php echo $row['id'] ; ?>';
console.log(id);
 $('.click_notes').on('click',function(){
  var question_id =$(this).data('question-id);
  $('.comment_form').hide();
   $(this).closest('ul').find('.demo').html("<div class='comment_form'><form action='#' method='post'><input type='hidden' name='question_id' value='"+  +"'><textarea cols ='50' class='span10' name='notes' rows='6'></textarea><br><input class='btn btn-primary' name= 'submit_notes' type='submit' value='Add Notes'></form><br></div>");
 });
});
</script>