Toggle after every row in HTML TABLE

Question

I have a HTML Table. Inside my Html Table I have a PHP foreach loop to fetch and display data from db into a table(A sample image attached Below). The problem is that I want to display a html form underneath that particular row which I click in that table. But for some reason, which ever row I click the form appears underneath the last Row Only .(A sample image is attached below). I have tried many examples of jQuery but didn't work. Here My html and php code:

<div class="table-responsive top">
      <table class="table table-condensed">
        <thead>
          <tr>
            <th>#</th>
            <th>Title</th>
            <th>Critility</th>
            <th>Priority</th>
            <th>Description</th>
            <th>Date Submitted</th>
            <th>Total Submittions</th>
          </tr>
        </thead>
        <tbody>
          <?php
          foreach($results as $data){

              echo '<tr  class="dropDown">          //dropDown Class
                  <td></td>
                  <td>'.$data['Title'].'</td>
                  <td>'.$c.'</td>
                  <td>'.$p.'</td>
                  <td>'.$data['Description'].'</td>
                  <td>'.$data['Date_Submitted'].'</td>
                  <td></td>
              </tr>';
          }

        ?>

        </tbody>
      </table>
      <div id="panel_1" class="dropdown-container">     //Class="dropdown-container bootstrap"
        <form action="/action_page.php">
          <fieldset>
            <label>XYZ Questions </label><br>
              <label class="radio-inline">
                <input type="radio" name="optradio">
                <label>YES</label>
            </label>
              <label class="radio-inline left">
                <input type="radio" name="optradio">
                <label>NO</label>
            </label>
          </fieldset>
          <fieldset>
            <label>xyz Questions</label><br>
              <label class="radio-inline">
                <input type="radio" name="optradio">
                <label>YES</label>
              </label>
              <label class="radio-inline left">
                <input type="radio" name="optradio">
                <label>NO</label>
              </label>
          </fieldset>
          <fieldset>
            <label>XYZ Questions</label><br>
              <label class="radio-inline">
                <input type="radio" name="optradio">
                <label>YES</label>
              </label>
            <label class="radio-inline left">
                <input type="radio" name="optradio">
                <label>NO</label>
            </label>
          </fieldset>
          <fieldset>
              <label>XYZ Questions</label><br>
                <label class="radio-inline">
                    <input type="radio" name="optradio">
                    <label>YES</label>
                </label>
                <label class="radio-inline left">
                    <input type="radio" name="optradio">
                    <label>NO</label>
                </label>
          </fieldset>
          <div class="checkbox">
            <label><input type="checkbox"> Remember me</label>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </div>
      </div>
    </div>

And Here is my Script :

<script>
    $(document).ready(function() {    
        $(".dropDown").click(function() {
            $(this).Toggle();
        })
    });
</script>

Answer 1

You can do it like this:

$('.dropDown').click(function() {
  var form = $('.dropdown-container').clone();
  form.removeClass('dropdown-container');
  $(this).after(form);
  form.show();
});

Online Demo (jsFiddle)