在动态生成的每个内容上显示 <textarea>

Question

我在动态生成的页面上列出了问题和选项（多项选择题）。我想将此提供给内容管理团队，如果他们发现任何有问题的错误，他们可以单击“注释”，然后会为该问题打开一个文本区域，他们可以编写该注释。所以现在如果我点击一个问题，文本区域会打开，但是如果我点击下一个问题的“注释”选项，文本区域会在前一个问题的部分打开。如何纠正这个问题，我环顾四周，但没有任何线索。让我知道我哪里出错了。

<?php if($row['section'] == 1) {?>  
<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;">
 <div onclick= "myFunction()"> <font color='yellow'>Notes</font></div>  


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

<script type="text/javascript">
function myFunction() {
  document.getElementById("demo").innerHTML += "<div class='comment_form'><form action='#' method='post'><textarea class='span10' name='Comment' rows='6'></textarea><br><input class='btn btn-primary' type='submit' value='Reply'></form></div>";
}  
</script>

</ul>
<div id="demo"></div>         
<?php $i++;$no++; ?>

<?php } ?> 

Answer 1

由于那里添加了jQuery标签，所以我将给出一个jquery解决方案：-

1.将<div id="demo"></div>转换为<div class="demo"></div>并放入<ul></ul>中

2.从 div 中删除 onclick 并在该 div 上添加类 click_notes

3.添加jquery库并使用以下代码

$(document).ready(function(){
 $('.click_notes').on('click',function(){
   $('.comment_form').hide(); //hide show form
   $(this).closest('ul').find('.demo').html("<div class='comment_form'><form action='#' method='post'><textarea class='span10' name='Comment' rows='6'></textarea><br><input class='btn btn-primary' type='submit' value='Reply'></form></div>");
 });
});

示例 sn-p:-

$(document).ready(function(){
 $('.click_notes').on('click',function(){
   $('.comment_form').hide();//hide show form
   $(this).closest('ul').find('.demo').html("<div class='comment_form'><form action='#' method='post'><textarea class='span10' name='Comment' rows='6'></textarea><br><input class='btn btn-primary' type='submit' value='Reply'></form></div>");
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-group">
  <li class="list-group-item active">Ques ID :1<div class="question">Q1</div><div style="float:right; margin-top:-20px;"><div class="click_notes"> <font color='yellow'>Notes</font></div>Marks:5</div>
  </li>
  <li class="list-group-item wrp_radio">
    <div class="radio noMargin"><label><input disabled type="radio" class="checkedInfo" alt="1"  name="optionAns1"  value="1">1</label></div>
  </li>
  <li class="list-group-item wrp_radio">
    <div class="radio noMargin"><label><input disabled type="radio" class="checkedInfo" alt="2"  name="optionAns2"  value="1">2</label></div>
  </li>
  <li class="list-group-item wrp_radio">
    <div class="radio noMargin"><label><input disabled type="radio" class="checkedInfo" alt="3"  name="optionAns3"  value="1">3</label></div>
  </li>
  <li class="list-group-item wrp_radio">
    <div class="radio noMargin"><label><input disabled type="radio" class="checkedInfo" alt="4"  name="optionAns4"  value="1">4</label></div>
  </li>
  <div class="demo"></div>
</ul>
<ul class="list-group">
  <li class="list-group-item active">Ques ID :2<div class="question">Q2</div><div style="float:right; margin-top:-20px;"><div class="click_notes"> <font color='yellow'>Notes</font></div>Marks:5</div>
  </li>
  <li class="list-group-item wrp_radio">
    <div class="radio noMargin"><label><input disabled type="radio" class="checkedInfo" alt="1"  name="optionAns1"  value="1">1</label></div>
  </li>
  <li class="list-group-item wrp_radio">
    <div class="radio noMargin"><label><input disabled type="radio" class="checkedInfo" alt="2"  name="optionAns2"  value="1">2</label></div>
  </li>
  <li class="list-group-item wrp_radio">
    <div class="radio noMargin"><label><input disabled type="radio" class="checkedInfo" alt="3"  name="optionAns3"  value="1">3</label></div>
  </li>
  <li class="list-group-item wrp_radio">
    <div class="radio noMargin"><label><input disabled type="radio" class="checkedInfo" alt="4"  name="optionAns4"  value="1">4</label></div>
  </li>
  <div class="demo"></div>
</ul>

Answer 2

这部分：

<div id="demo"></div>         
<?php $i++;$no++; ?>
<?php } ?> 

将使用 id=demo 创建多个 div，因此当您使用 document.getElementById("demo") 时，它只会获取第一个。

使用类而不是 id，然后使用相对导航来获取相关的。

保留onclick= 并使用 jquery（根据标签），这将变为：

<div onclick= "myFunction(this)">

function myFunction(el) {
    $(el).closest(".list-group-item").find(".demo").html("<div class='comment_form...