For example the open button if I press it should turn to red, but all the buttons in other rows also turn to red because are on the same component.
Script
let user = { loggedIn: false };
function toggle(item) {
user.loggedIn = !user.loggedIn;
}
{#if !user.loggedIn}
<button id={item.id} class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full" on:click={toggle(item)}>
Open
</button>
{/if} {#if user.loggedIn}
<button id={item.id} class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full" on:click={toggle(item)}>
Close
</button>
{/if}
The ID doesn't really come into play with Svelte styling (unless you want it to). I think that, at the moment, your problems are with your click handler syntax (as H.B. stated) and likely how you are passing data into your Button component. I'm also not entirely sure what is going on with item, since it isn't really defined anywhere (maybe that's somewhere else in your code?). Taking your example, I trimmed out some of the fat to make it easier to read on SO. Hopefully I understood what you're trying to do correctly. Let me know if not, and I'll update. REPL Link
Button.svelte (Note the on:click handler and the export let for the user variable).
<script>
export let user = { loggedIn: false};
function toggle() { user.loggedIn = !user.loggedIn; }
</script>
{#if !user.loggedIn}
<button class="bg-green-500" on:click={()=>toggle()}>
Open
</button>
{/if}
{#if user.loggedIn}
<button class="bg-red-500" on:click={()=>toggle()}>
Close
</button>
{/if}
<style>
button {box-sizing: border-box; border-radius: 10px; padding: 5px 10px; place-items: center; width: 100px; color: white}
.bg-green-500 {background: green;}
.bg-green-500:hover {font-weight:700;}
.bg-red-500 {background: red;}
.bg-red-500:hover {font-weight: 700;}
</style>
App.svelte (or whatever is using the Button)
<script>
import Btn from './Button.svelte'
let users = [{id: 1, loggedIn: false}, {id: 2, loggedIn: false}, {id: 3, loggedIn: true}];
</script>
{#each users as user}
<Btn {user} />
{/each}