Show Data database only with specific ID

I have this code to show all data in my database

<?php foreach($alldatas as $data): ?>
                <div class="col-md-4">
                    <div class="card">
                    <div class="content">
                        <h3><?php echo $data['data_name'];?></h3>
                        <div class="footer text-center">
                        <?php echo $data['data_version'];?>
                        </div>
                    </div>
                    </div>
                </div>
<?php endforeach; ?>

That code works perfect to show all my data with different data_name and data_version. But what I want is to show the data only with specific ID

So I want to make it works with bootstrap navtabs

    <div class="col-md-12">
    <ul class="nav nav-pills nav-tabs nav-justified" role="tablist">
    <li role="presentation" class="active"><a href="#pro" aria-controls="pro" role="tab" data-toggle="tab">Pro</a></li>
    <li role="presentation"><a href="#middle" aria-controls="middle" role="tab" data-toggle="tab">Middle</a></li>
    <li role="presentation"><a href="#low" aria-controls="low" role="tab" data-toggle="tab">Low</a></li>
    </ul>
    </div>

    <?php foreach($alldatas as $data): ?>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane fade in active" id="pro">
            <?php if($data['id'] == "2" | $data['id'] == "3" | $data['id'] == "4"){?>
                            <div class="col-md-4">
                                <div class="card">
                                <div class="content">
                                    <h3><?php echo $data['data_name'];?></h3>
                                    <div class="footer text-center">
                                    <?php echo $data['data_version'];?>
                                    </div>
                                </div>
                                </div>
                            </div>
            <?php } ?>
          </div>
          <div role="tabpanel" class="tab-pane fade" id="middle">
            <?php if($data['id'] == "5" | $data['id'] == "6" | $data['id'] == "7"){?>
                            <div class="col-md-4">
                                <div class="card">
                                <div class="content">
                                    <h3><?php echo $data['data_name'];?></h3>
                                    <div class="footer text-center">
                                    <?php echo $data['data_version'];?>
                                    </div>
                                </div>
                                </div>
                            </div>
            <?php } ?></div>
</div>
<?php endforeach; ?>

But it just only show data with ID 1,2,3 when I try to click others tab. How to fix this?