Alright, I am a web-design noob. I am attempting to take a input field from a modal and adding that value to a table found on the main page and struggling to do so. My attempts were to write a script to this failed as I saw no result.

Here is the attempt: I've got this input field that is found in my modal(taken straight from bootstrap). I've assigned it the id=addHousemate

<input type=text class=form-control  id=addHousemate placeholder=Housemate's Name>

And here is the button I wish to submit it with.

<input type=button class=btn btn-primary name =addHousemate>Submit</button>

And finally, this is the tbody in which i'd like the added input to be place.

<tbody>

   <div id=housemateTable></div>

</tbody>

Now my attempt at writing a jquery function is as follows:

jQuery(function($){

  $('input[name=add]').click(function() {

    value = $('input[name=addHousemate]').val();

            $('td tr:last').after(<tr><td> + value + </td></tr>);

            $('input[name=addHousemate]').val();

   });

});

However I get no result. I also looked up using jquery append but still didn't get me anywhere. Please help!

<!-- Bootstrap -->

<link href=css/bootstrap.min.css rel=stylesheet>



<!-- JavaScript -->

  <script  language=javascript type=text/JavaScript src=js/jquery-1.11.0.min.js></script>   

  <script  language=javascript type=text/JavaScript src=js/submit.js></script>



<div class=container>

<div class=row>

  <div class=col-md-8>

    <div class=col-md-4>

      <div class= table-responsive>

        <table class=table table-hover>

          <thead>

            <tr>

              <th>People of the House</th>

            </tr>

          </thead>

          <tbody>

             <div id=housemateTable></div>

          </tbody>

        </table>

            <!-- Button trigger modal -->

            <button class=btn btn-primary btn-lg data-toggle=modal data-target=#myModal>

              Add a Housemate

            </button>



            <!-- Modal -->

            <div class=modal fade id=myModal tabindex=-1 role=dialog aria-labelledby=addHousemate aria-hidden=true>

              <div class=modal-dialog>

                <div class=modal-content>

                  <div class=modal-header>

                    <button type=button class=close data-dismiss=modal aria-hidden=true>&times;</button>

                    <h4 class=modal-title>Add a Housemate</h4>

                  </div>

                  <div class=modal-body>

                    <form role =form>

                      <div class=form-group>

                        <input type=text class=form-control id=addHousemate nameaddHousemate placeholder=Housemate's Name>

                      </div>

                    </form>

                  </div>

                  <div class=modal-footer>

                    <button type=button class=btn btn-default data-dismiss=modal>Close</button>

                    <input type=button class=btn btn-primary name =add value=add>

                  </div>

                </div>

              </div>

            </div>             

      </div>

    </div>