Multiple bootstrap tabs on a page

Question

I am trying to set up my page with different 10 different panels and 2 tabs each, however, anytime I click on the second panels tabs it changes the first one? How do I allow my page to have multiple panels, do I need to set separate css?

I've tried splitting the divs but thats then caused issues with my css.

The first two panels:

.panel-tabs {
	position: relative;
	bottom: 30px;
	clear: both;
	border-bottom: 1px solid transparent;
}

.panel-tabs>li {
    float: left;
    margin-bottom: -1px;
}

.panel-tabs>li>a {
    margin-right: 2px;
    margin-top: 4px;
    line-height: .85;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    color: #ffffff;
}

.panel-tabs>li>a:hover {
    border-color: transparent;
    color: #ffffff;
    background-color: transparent;
}

.panel-tabs>li.active>a,
.panel-tabs>li.active>a:hover,
.panel-tabs>li.active>a:focus {
    color: #fff;
    cursor: default;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, .23);
    border-bottom-color: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-md-6 " div id="1">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Griddled chicken fajitas with squashed avocado</h3>
            <h5>Prep: 15mins | Cook: 5mins | Serves: 2 | Easy</h5>
            <span class="pull-right">
                        <!-- Tabs -->
                        <ul class="nav panel-tabs">
                            <li class="active"><a href="#tab1" data-toggle="tab">Ingredients</a></li>
                            <li><a href="#tab2" data-toggle="tab">Method</a></li>

                        </ul>
                    </span>
        </div>
        <div class="panel-body">
            <div class="tab-content">
                <div class="tab-pane active" id="tab1">
                    <ul>
                        <li> 2 garlic cloves, finely grated</li>
                        <li>150g pot plain bio yogurt</li>
                        <li>½ tsp smoked paprika</li>
                        <li>¼ tsp ground cumin</li>
                        <li>¼ tsp ground coriander</li>
                        <li>¼ tsp oregano</li>
                        <li>200g mini chicken breast fillets</li>
                        <li>2 tomatoes, chopped</li>
                        <li>1 small red onion, finely chopped</li>
                        <li>1 green chilli, deseeded and finely chopped (optional)</li>
                        <li>4 tbsp chopped fresh coriander</li>
                        <li>juice 1 lime</li>
                        <li>2 seeded tortillas</li>
                        <li>1 avocado, halved and stoned</li>
                    </ul>
                </div>
                <div class="tab-pane" id="tab2">
                    <ol>
                        <li>Stir the garlic into the yogurt. Spoon 2 tbsp into a medium bowl, add the spices and oregano, and stir well. Add the chicken and toss until coated.</li>
                        <br>
                        <li>Heat a griddle pan and griddle the chicken for 5 mins, turning once, until cooked all the way through but still moist. (If you want to fry the chicken, wipe a little oil in a non-stick pan first or the spices will burn.)</li>
                        <br>
                        <li>Mix the tomatoes with the onion, chilli (if using), coriander and lime to taste. Heat the tortillas following pack instructions. Scoop the flesh from the avocado, squash half on top of each tortilla, then add the chicken and the salsa salad. Spoon over the garlicky yogurt, roll up and eat while still hot.</li>

                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-md-6 " div id="2">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">3-veg mac 'n' cheese</h3>
            <h5>Prep: 10mins | Cook: 40mins | Serves: 4 | Easy</h5>
            <span class="pull-right">
                        <!-- Tabs -->
                        <ul class="nav panel-tabs">
                            <li class="active"><a href="#tab1" data-toggle="tab">Ingredients</a></li>
                            <li><a href="#tab2" data-toggle="tab">Method</a></li>

                        </ul>
                    </span>
        </div>
        <div class="panel-body">
            <div class="tab-content">
                <div class="tab-pane active" id="tab1">
                    <ul>
                        <li>150g butternut squash, cut into chunks
                            <li>300g penne (we used Napolina 50% white 50% wholemeal)</li>
                            <li>40g butter</li>
                            <li>1 small leek, finely sliced (about 50g)</li>
                            <li>25g flour</li>
                            <li>600ml milk</li>
                            <li>100g frozen peas</li>
                            <li>175g mature Cheddar cheese (we used a vegetarian version)</li>
                            <li>1 slice day-old brown bread, blitzed into crumbs</li>
                    </ul>
                </div>
                <div class="tab-pane" id="tab2">
                    <ol>
                        <li> Heat oven to 200C/fan 180C/gas 6. Put the butternut squash in a steamer over boiling water. Steam for around 15-20 mins or until tender. Drain and then blitz in a food processor until smooth.</li>
                        <br>
                        <li>Cook the pasta according to the pack instructions.</li>
                        <br>
                        <li>Heat the butter in a medium saucepan, add the leek and cook for 2 mins. Stir in the flour and cook for 1-2 mins more. Take the pan off the heat and gradually whisk in the milk. Return to the heat and bring to the boil, stirring all the time. Simmer for 5 mins. Stir in the peas and bring back to a simmer. Take the pan off the heat and stir in the butternut squash, then 125g cheese.</li>
                        <br>
                        <li>Stir the pasta into the sauce and transfer to an ovenproof dish. Sprinkle over the remaining cheese and the breadcrumbs. Bake for 20 mins or until golden and bubbling.</li>
                    </ol>
                </div>

            </div>
        </div>
    </div>
</div>

I would like each panel's tabs to all work individually

Answer 1

2nd panel should be

<li class="active"><a href="#p2tab1" data-toggle="tab">Ingredients</a></li>
<li><a href="#p2tab2" data-toggle="tab">Method</a></li>

2nd panel 1st tab

<div class="tab-pane active" id="p2tab1">

2nd panel 2nd tab

<div class="tab-pane" id="p2tab2">