I am new to jquery and HTML. I am trying to make a form by using Jquery. I want to make a button which will add input fields in the html page. (10 max). Here is something i tried.

HTML FILE

```
<!doctype html>
<html>
  <head>
    <title>TakeMeHome</title>
    <link rel="stylesheet" type="text/css" href="css/design.css"/>
    <script type="text/javascript" src="/js/app.js"></script>
  </head>
  <body>
    <center><form id="details">
      Your Place:<input id="source" type="text"><br><br>
      Friend1:<input id="friend1" type="text"><br><br>
      <div class="friends"></div>
      <div id="button">Add!</div><br><br>

      <input type="submit" id="submit" value="submit">
    </form>
  </body>
</html>

```

JS File

```
var j=2;

$(document).ready(function(){
    $('#button').click(function(){
        $('#friends').append("friend"+j+"<input type='text' id='friend"+j+"' " );   
    });

});

```

css file

```
#button
{
display: inline-block;
height: 20px;
width: 40px;
background-color: red;
font-family: arial;
border-radius: 5px;
text-align: center; 
color:white;
}

```