• HTML
• CSS
• JS

HTML

<div x-data="registro()">
    <button @click="agregar()" class="btn">+</button>
    <ul>
        <template x-for="lista in registro" :key="lista.id">
            <li>
                <input type="text" placeholder="Ingrese datos...">
                <button @click="quitar(lista.id)" class="btn elim">x</button>
            </li>
        </template>
    </ul>
</div>

CSS

*{
    box-sizing:border-box;
    font-family:sans-serif;
}

ul{
    list-style:none;
}

input{
    padding:0.5rem;
    border-radius:0.3rem;
    border:1px solid #ccc;
}

.btn{
    background:#2ecc71;
    color:white;
    border:none;
    margin:0.5rem;
    padding:0.2rem 0.7rem;
    cursor:pointer;
    font-size:1.5rem;
    outline:none;
}
.btn.elim{
    background:red;
    font-size:1rem;
}

JS

function registro(){
    return {
        cantidad:2,
        registro:[
            {
                id:1,
                terminada:true
            }
        ],
        agregar(){
            //Agregar nuevo form input
            this.registro.push({
                id:this.cantidad++,
                terminada:false
            });
        },
        quitar(eliminarRegistro){
          this.registro = this.registro.filter(lista => lista.id != eliminarRegistro)  
        }
    }
}