title: JQuery Dialog on table row
body: <p>I am using c# and razor to produce a list of invoices. Each invoice is a table row and has a huge list of notes against it. To avoid a massive amount of space between rows, I want to hide the notes and allow a pop to view it. It is currently:</p>
  
  <pre><code> &lt;td&gt;
  @foreach (var invoiceLine in invoice.InvoiceLines)
                  {
                      &lt;p&gt;
                          &lt;strong&gt;@invoiceLine.Date.ToShortDateString() @invoiceLine.Username&lt;/strong&gt; &lt;br /&gt;
                          @Html.Raw(invoiceLine.Notes.Replace(Environment.NewLine, "&lt;br /&gt;")) 
                          @Html.Raw((invoiceLine.DueDate.HasValue ? "&lt;br /&gt;&lt;strong&gt;Follow up:&lt;/strong&gt; " + invoiceLine.DueDate.Value.ToShortDateString() : "")) 
                          @Html.Raw(invoiceLine.Completed ? "&lt;br /&gt;&lt;strong&gt;Completed&lt;/strong&gt;" : "")
                      &lt;/p&gt;
                  }
  </code></pre>
  
  <p></p>
  
  <p>So what I want to do is to add the popup using jquery:</p>
  
  <pre><code>$(function () {
  
  $('#clickMe').click(function (event) {
      var mytext = $('#myText').val();
  
      $('&lt;div id="dialog"&gt;' + mytext + '&lt;/div&gt;').appendTo('body');
      event.preventDefault();
  
      $("#dialog").dialog({
          width: 600,
          modal: true,
          close: function (event, ui) {
              $("#dialog").hide();
          }
      });
  }); //close click
  </code></pre>
  
  <p>});</p>
  
  <p>Then modify my code:</p>
  
  <pre><code>&lt;td&gt;
              &lt;h3 id="clickMe"&gt;Open Notes&lt;/h3&gt;
                 &lt;textarea cols="1" rows="75" id="myText" style="display:none"&gt;
                  @foreach (var invoiceLine in invoice.InvoiceLines)
                  {
                      &lt;p&gt;
                          &lt;strong&gt;@invoiceLine.Date.ToShortDateString() @invoiceLine.Username&lt;/strong&gt; &lt;br /&gt;
                          @Html.Raw(invoiceLine.Notes.Replace(Environment.NewLine, "&lt;br /&gt;")) 
                          @Html.Raw((invoiceLine.DueDate.HasValue ? "&lt;br /&gt;&lt;strong&gt;Follow up:&lt;/strong&gt; " + invoiceLine.DueDate.Value.ToShortDateString() : "")) 
                          @Html.Raw(invoiceLine.Completed ? "&lt;br /&gt;&lt;strong&gt;Completed&lt;/strong&gt;" : "")
                      &lt;/p&gt;
                  }
                  &lt;/textarea&gt;
              &lt;/td&gt;
  </code></pre>
  
  <p>First problem is, that only the first row appears. I presume because my id is the same all the way down?</p>
  
  <p>How do I make the dialog open for each row?</p>
  
  <p>I am a newb at c# and js btw :)</p>