JS script working only on one html card instead of all

So this Script changes the currency and symbol if I selected the currency from a select tag in html, but the problem is that it changes the currency and symbol only for the first card but the others not. Is there a way to change them all at the same time without doing a script for every card? the select works as follows: If I chose LBP and the currency was USD then the number would be multiplied by 8500 and if chose USD with the currency being in LBP then it would be divided by 8500, while if I chose the same currency that is chosen then nothing happens.

HTML:

<div class="card">
        <img class="imgcar" src="cars/402088-2020-land-rover-range-rover-velar.jpg" alt="Avatar" style="width:16em">
        <div class="container">
          <h4><b>Range Rover Velar</b><br><b>4 Doors</b><br><b> 5 Passengers</b> </h4>
          <div><p id="price">100</p><p id="symbol">$</p><p id="duration">/24hrs</p></div>
        </div>
      </div>
      <div class="card">
        <img class="imgcar" src="cars/2020-BMW-M8-Competition-Convertible-02-e1570483239877.jpg" alt="Avatar"
          style="width: 16em;">
        <div class="container">
          <h4><b>BMW M8</b><br><b>2 Doors</b><br><b> 2 Passengers</b></h4>
          <p id="price">150</p><p id="symbol">$</p><p id="duration">/24HRS</p>
        </div>
      </div>

JS:

function report(currencyy) {
var price = document.getElementById("price");
var symbol = document.getElementById("symbol");

if (currencyy == "lbp") {
  if (symbol.textContent == "$") {
    symbol.textContent = "lbp";
    var text = price.textContent;
    var number = parseInt(text) * 7500;
    price.textContent = number;
  }
 }
 if (currencyy == "usd") {
  if (symbol.textContent == "lbp") {
    symbol.textContent = "$";
    var text = price.textContent;
    var number = parseInt(text) / 7500;
    price.textContent = number;
  }
 }
}