Как сделать, чтобы после добавления пятого инпута, кнопка еще пропала? Ну или хотя бы не работала

<script language='JavaScript' type="text/javascript">
var i = 1;
 
function ff(){
document.getElementById('form_inner').innerHTML = document.getElementById('form_inner').innerHTML +
"<input type='text' name='option" + i + "'><input type='file' name='im" + i + "'><br>";
 
 
i++;
}
 
</script>
 
<form name='form' id='form' action='#' method='post'>
<span name='form_inner' id='form_inner'>
<input type='text' name='option1' /><input type='file' name='im1' /><br>
<input type='text' name='option2' /><input type='file' name='im2' /><br>
</span>
<input type='button' value='еще' onclick="ff()">
<input name='frm_sbm' type='submit' value='убрать'>
</form>

function ff(){
var k, s;
k=document.querySelectorAll("#form_inner input[type=text]").length+1;
if(k<8){
s='<input type="text" name="option'+k+'"><input type="file" name="im'+k+'"><br>';
document.getElementById('form_inner').innerHTML+=s}
 };

function ff(){
var el, box, k, s;
box=document.getElementById("form_inner");
k=document.querySelectorAll("#form_inner input[type=text]").length+1;
if(k<8){
//s='<input type="text" name="option'+k+'"><input type="file" name="im'+k+'"><br>';
//document.getElementById('form_inner').innerHTML+=s
 
el=document.createElement("input");
el.type="text";
el.name='option'+k;
box.appendChild(el);
el=document.createElement("input");
el.type="file";
el.name='im'+k;
box.appendChild(el);
el=document.createElement("br");
box.appendChild(el)};
if(k===8){document.getElementById("stop").disabled="disabled"};
 };