• HTML
• CSS
• JS

HTML

<div x-data="{open: false}">
    <button class="btn" @click="open =! open">Mostrar mensaje</button>
    <div class="msj" x-show="open">
       Alpine.js le ofrece la naturaleza reactiva y declarativa de grandes marcos como Vue o React a un costo mucho menor.
    </div>
</div>

CSS

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

.btn{
    background:#2ecc71;
    color:white;
    border:none;
    padding:0.5rem;
    cursor:pointer;
}
.msj{
    position:absolute;
    background:#f2f3f4;
    border:1px solid #eee;
    width:auto;
    height:auto;
    padding:0.5rem;
    margin-top:0.5rem;
}

JS

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