New input in javascript appears and dissappears on click

Using Javascript I would like to create a new input text with the click of a button. This is my code:

<section id="poststarring">
    <script type="text/javascript">
        var counter = 2;
        function newactor(){
           document.getElementById("actorinput").innerHTML += '<input type="text" name="starring"' + counter + ' value="actor" class="starring"> <span>as</span> <input type="text" name="as"' + counter + ' value="character" class="character">';
           counter += 1; 
           return false;
        }
    </script>
    <section id="actorinput">
        <input type="text" name="starring1" value="actor" class="starring"> <span>as</span> <input type="text" name="as1" value="character" class="character">
    </section>
    <button onclick="newactor()">Add another actor</button>
</section>

This code is found withing a larger form that works as it should, and above it a section of php.

When i click the button the new input appears for a second and dissappears right away. I have tried several things already: I have foound different javascript codes, and I have changed the position of the javascript code to the head. The two possible soulutions I have found researching this problem - adding return false to the function, and making sure the buttons are not have not helped me so far.