title: Not able to take data from table and set to bootstrap modal
body: <p>I am working on a piece of code and since I dont have too much experience with jquery or javascript I need your help. I want to take the data from the row when button EditBtn is clicked and set those values to modal. I tried the code below but It was not working.</p>
  
  <p>Below is my code</p>
  
  <p><strong>Table :</strong></p>
  
  <pre><code> &lt;table id="example" class="table table-bordered table-hover"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Ödeme Türü&lt;/th&gt;
              &lt;th&gt;Ödeme Başlığı&lt;/th&gt;
              &lt;th&gt;İçerik&lt;/th&gt;
              &lt;th&gt;Son Ödeme Tarihi&lt;/th&gt;
              &lt;th&gt;Tutarı&lt;/th&gt;
              &lt;th&gt;Ödeme Durumu&lt;/th&gt;
              &lt;th&gt;Düzenle&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
  
          @foreach (OdemeList item in Model)
          {
              &lt;tr id="@item.Odeme.OdemeID"&gt;
  
                  &lt;td&gt;@item.Odeme.OdemeType&lt;/td&gt;
                  &lt;td&gt;@item.Odeme.OdemeTitle&lt;/td&gt;
                  &lt;td&gt;@item.Odeme.OdemeContent&lt;/td&gt;
                  &lt;td&gt;@item.Odeme.SonOdemeTarih&lt;/td&gt;
                  &lt;td&gt;@item.Odeme.OdemeTutar&lt;/td&gt;
                  @if (@item.KullaniciOdeme.isPay == true)
                  {
                      &lt;td&gt;Odendi&lt;/td&gt;
                  }
                  else
                  {
                      &lt;td&gt;Odenmedi&lt;/td&gt;
                      &lt;td&gt;
                          &lt;form&gt;
                              &lt;script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                                      data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
                                      data-amount="@item.Odeme.OdemeTutar"
                                      data-name="@item.Odeme.OdemeTitle"
                                      data-image="/Content/LoginCssJs/pay.png"
                                      data-locale="auto"&gt;
  
                              &lt;/script&gt;
                          &lt;/form&gt;
                      &lt;/td&gt;
                      @*&lt;td&gt;
                              &lt;a data-toggle="modal" data-target=".bootstrapmodal3"&gt;&lt;button class="btn btn-success"&gt;Öde&lt;/button&gt;&lt;/a&gt;
                          &lt;/td&gt;*@
                  }
                  &lt;td&gt;
                      &lt;a data-toggle="modal" id="EditBtn" class="btn edit" data-target=".bootstrapmodal"&gt;&lt;img src="@Url.Content("~/Content/Icons/edit.png")" alt="Düzenle" /&gt;&lt;/a&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;a data-toggle="modal" data-target=".bootstrapmodal2"&gt;&lt;img src="@Url.Content("~/Content/Icons/Delete.png")" alt="Sil" /&gt;&lt;/a&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
          }
  
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>My modal:</strong></p>
  
  <pre><code>&lt;div class="modal fade bootstrapmodal"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button data-dismiss="modal" class="close"&gt;&lt;span&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                  &lt;div class="modal-title"&gt;
                      &lt;h3&gt;Ödeme Düzenle&lt;/h3&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;form&gt;
                      &lt;label&gt;Ödeme Türü&lt;/label&gt;
                      &lt;select class="form-control" id="OdemeTuru"&gt;
                          &lt;option&gt;Aidat&lt;/option&gt;
                          &lt;option&gt;Isınma&lt;/option&gt;
                          &lt;option&gt;Bina Gideri&lt;/option&gt;
                      &lt;/select&gt;&lt;br /&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="odemebasligi"&gt;Ödeme Başlığı&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="odemebasligi" placeholder="OdemeTitle"&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="comment"&gt;Ödeme içeriği&lt;/label&gt;
                          &lt;textarea class="form-control" rows="5" id="comment" placeholder="-OdemeContent"&gt;&lt;/textarea&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="sr-only" for="exampleInputAmount"&gt;Tutar&lt;/label&gt;
                          &lt;div class="input-group"&gt;
                              &lt;div class="input-group-addon"&gt;TL&lt;/div&gt;
                              &lt;input type="text" class="form-control" id="exampleInputAmount" placeholder="OdemeTutar"&gt;
                              &lt;div class="input-group-addon"&gt;.00&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="odemetarihi"&gt;Son Ödeme Tarihi&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="odemetarihi" placeholder="SonOdemeTarih"&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button class="btn btn-primary"&gt;Kaydet&lt;/button&gt;
                  &lt;button class="btn btn-danger" data-dismiss="modal"&gt; Vazgeç&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p><strong>Script:</strong></p>
  
  <pre><code>&lt;script&gt;
      $('a.edit').on('click', function() {
          var myModal = $('.bootstrapmodal');
          //// now get the values from the table
          //var OdemeTuru = $(this).closest('tr').find('td.OdemeType').html();
          var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
          var OdemeIcerik = $(this).closest('tr').find('td.OdemeContent').html();
          var OdemeTutar = $(this).closest('tr').find('td.SonOdemeTarih').html();
          var SonOdemeTarihi = $(this).closest('tr').find('td.OdemeTutar').html();
  
          //// and set them in the modal:
          //$('#', myModal).val(OdemeTuru);
          $('#odemebasligi', myModal).val(OdemeBaslik);
          $('#comment', myModal).val(OdemeIcerik);
          $('#exampleInputAmount', myModal).val(OdemeTutar);
          $('#odemetarihi', myModal).val(SonOdemeTarihi);
          // and finally show the modal
          myModal.modal({ show: true });
  
          return false;
      });
  &lt;/script&gt;
  </code></pre>