I am trying to show 2 different recipes depending on what recipe button I am clicking and unsure how to get that to stop and only show individual recipes.

```
\\First Card
<Card style={{ width: '18rem' }} className="Chicken">
            <Card.Img variant="top" src={chicken} className="Fav_image" />
            <Card.Body>
                <Card.Title className="Fav_title">Chicken Paprakash</Card.Title>
                <Card.Text className="Fav_text">
                    This is one of my favourite fall/winter recipes to make.
                </Card.Text>
            <Button variant="outlined" onClick={handleOpen} className="button">Recipe</Button>
        </Card.Body> <Card>

```

```
\\Second Card 
<Card style={{ width: '18rem' }} className="Fajita">
            <Card.Img variant="top" src={fajita} className="Fav_image" />
            <Card.Body>
                <Card.Title className="Fav_title">Chicken Fajitas</Card.Title>
                <Card.Text className="Fav_text">
                    Great for when you only have a few minutes to cook dinner.
                </Card.Text>
            <Button variant="outlined" onClick={handleOpen} className="button">Recipe</Button>
        </Card.Body> <Card>

```

Here is the issue:  

[![enter image description here](https://i.stack.imgur.com/jruhr.jpg)](https://i.stack.imgur.com/jruhr.jpg)

I tried multiple different fixes on Stack overflow but not luck