Hi to all you javascript gurus, I have a personal project that I'm building to teach myself web design. At the moment users can copy and paste video titles from the IFRAME page to the form fields on the hosting page and all works rather well, unfortunately this is a very slow and tedious process. What I would like to do is for the users to click on an "add" button that will automatically add the video title to the form field.
The IFRAME currently looks something like this.
HTML Code:
<h2>Video Playlist</h2>
    <li>   Title 1.mp4</li>
    <li>   Title 2.mp4</li>
    <li>   Title 3.mp4</li>
    <li>   Title 4.mp4</li>
    <li>   Title 5.mp4</li>
    <li>   Title 6.mp4</li>
    <li>   Title 7.mp4</li>
    <li>   Title 8.mp4</li>
    <li>   Title 9.mp4</li>
    <li>   Title 10.mp4</li>
And I would like it to look something like the next image.
Dam can't upload bitmaps sorry bout that.

The code for the form I'm using is this.

HTML Code:
<div id="apDiv4"><script type="text/javascript">
          var fieldCount = 1;
      function addVideo() {
        var newVideo = document.createElement('input');
        newVideo.type ='text';
        newVideo.name = 'video' + fieldCount;
        newVideo.id = 'video' + fieldCount;

<h1 align="center">
    <style1><span id="h1">Add Videos</span></style1>

  <form action="createplaylist.php" method="post" enctype="multipart/form-data" target="_self">
        <label for="file" id="p">Please copy & paste video name</label>
      <input type="text" name="video" id="video">
      <fieldset id="fs">
        <legend id="p">Other videos you wish to add <br> (max=250)</legend><p></p>
        <button onclick="addVideo(); return false;">
          Add another video
        <input type="text" name="video1" id="video1" max="250">
      <input type="submit" value="Save details">