I have a react app with two buttons ("+", "-") that are created by a single component. I am trying to use CountAPI to store the input data from the two buttons. So far i am able to get the input and update the countAPI site to interperate either plus or minus from the buttons. The problem i am having is seperating the two buttons. It works for both buttons but i havent been able to figure out how to call the specific "+" or "-" button. For example, in the code below, its set to increment by +1 when i press the button, but i can press either the "+" or "-" button and they both increment by +1.

index.js

    import React from 'react';
    import ReactDOM from 'react- 
    dom/client';
    import './index.css';
    import App from './App';
    import reportWebVitals from 
    './reportWebVitals';
    import countapi from 'countapi-js';
    import "./App.js";
    
    const alb = ReactDOM.createRoot(document.getElementById('alb'));
    alb.render(
      <React.StrictMode>
<App />
      </React.StrictMode>
    );


    document.getElementById("alb").addEventListener("click", () => {
      countapi.update('f1AppAlbon', 'fbda1857-916b-413d-8b7b-503651f3c52c', +1).then((result) => {
alert(`The magic button has been pressed ${result.value} times.`);
      });
    });

App.js

    import React, { useState } from "react";
    import Button from "./components/Button";
    import "./App.css";
    import "./index.js";

    <div class="buttons">
      <Button title={"-"} action={decrementCount} class="minus"></Button>
      <Button title={"+"} action={incrementCount} class="plus"></Button>
    </div>

index.html

    <div id="+alb"></div>

Sorry if some terminology is wrong, im still new to this.