JS-скрипт работает только с одной html-картой, а не со всеми

Таким образом, этот скрипт изменяет валюту и символ, если я выбрал валюту из тега выбора в html, но проблема в том, что он меняет валюту и символ только для первой карты, а для остальных нет. Есть ли способ изменить их все одновременно, не создавая скрипт для каждой карты? Выбор работает следующим образом: если бы я выбрал LBP и валютой был доллар США, то число было бы умножено на 8500, а если бы я выбрал доллар США с валютой в LBP, тогда оно было бы разделено на 8500, а если бы я выбрал ту же валюту, которая выбрано, то ничего не происходит.

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;
  }
 }
}