title: Foreach loop - hide/show based on click event jquery
body: <p><a href="https://i.stack.imgur.com/C4DTU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C4DTU.png" alt="enter image description here"></a>I have a list of records in my view using foreach. Now, I want to hide/show a textbox based on a click event on an image. My code is following:</p>
  
  <pre><code>@foreach (var dateitem in list)
  {
      &lt;td style="width:6%;" id="HoursTxt"&gt;
          @Html.TextBoxFor(modelitem =&gt; dateitem.Hours, new { id = string.Format("txtHours"), style = "width:60%;" })
          &lt;img id=@(  dateitem.Project_Id + "_" + dateitem.Task_Id + "_" + "C" + "_img") src="~/Images/comment.png" onclick="GetComments(this.id);" /&gt;
          &lt;div id=@(  dateitem.Project_Id + "_" + dateitem.Task_Id + "_" + "C") style="border:solid;display:none;"&gt;
              &lt;textarea id=@(  dateitem.Project_Id + "_" + dateitem.Task_Id + "_" + "C" + "_text") style="position:absolute;" class="MyComment"&gt;&lt;/textarea&gt;                                                                                                          
          &lt;/div&gt;
      &lt;/td&gt;
  }
  </code></pre>
  
  <p>when I click on second, third images in that row, it shows textarea under only first textbox. My function is following:</p>
  
  <pre><code>function GetComments(id) {
  
      var prev; var strid = id;
      prev = strid.replace("_img", '');// alert(prev);
  
      //document.getElementById(prev).style.display = 'block';
      if (document.getElementById(prev).style.display == 'block') 
      {
          document.getElementById(prev).style.display = 'none';
      }
      else if (document.getElementById(prev).style.display == 'none') 
      {
          document.getElementById(prev).style.display = 'block';
      }
  
  }
  </code></pre>
  
  <p>Can anyone help me to solve this? 
  I want to hide/show textarea each time, below the particular textbox..
  Thanks in advance..</p>