Show and Hide a button on clicked column in React

 import React, { useEffect, useState } from "react";

import dayjs from "dayjs";

import { toWords } from "number-to-words";

function Billprocess2({ dailyworks, trainer, timeframe,rateperhr }) {

  const [topics, setTopics] = useState([]);

  const [today, setToday] = useState([]);

  const [totalTime, setTotalTime] = useState(0);

  const [increaseFontIcon,setIncreaseFontIcon]=useState('hidden');

  const [clickedRow,setClickedRow]=useState(null);

  const [txtsize,setTxtsize]=useState('14px');

  const handleHover=(rowindex)=>{

    setClickedRow(rowindex)

    setIncreaseFontIcon(increaseFontIcon==='block'?'hidden':'block');

  }

  const DecreaseFont=()=>{

    let temp=txtsize.split('p');

      temp=parseInt(temp[0])-1;

      setTxtsize(temp+'px');

  }

  const IncreaseFont=()=>{

      let temp=txtsize.split('p');

      temp=parseInt(temp[0])+1;

      setTxtsize(temp+'px');

  }

  useEffect(() => {

    const tempToday = [];

    let totalTimeAccumulator = 0;

    dailyworks.forEach((item) => {

      let dt = "";

      let tps = [];

      let test = [];

      let onedayTotalTime = 0;

      let check = 0;

      const detailstrainer = (x) => {

        x.split(",").forEach((t) => test.push(t));

        test.forEach((t) => {

          if (t.split("-")[0] === trainer) {

            onedayTotalTime += parseInt(t.split("-")[1], 10);

            totalTimeAccumulator += parseInt(t.split("-")[1], 10);

            check = 1;

          }

        });

        test = [];

      };

      Array.from({ length: timeframe }).forEach((_, index) => {

        detailstrainer(item[`s${index + 1}trainer`]);

        tps.push(item[`s${index + 1}topics`]);

      });

      if (check === 1) {

        dt = item["classdate"];

      }

      if (dt) {

        tps = [...new Set(tps.filter((item) => item))];

        tempToday.push({ date: dt, topics: tps.join(","), hr: onedayTotalTime });

      }

    });

    setToday(tempToday);

    setTotalTime(totalTimeAccumulator);

  }, [dailyworks, timeframe, trainer]); // Add dependencies here

  const totalAmt=(x)=>{

        return((parseInt(x)/60)*parseFloat(rateperhr));

  }

  const convertTime=(y)=>{

        return (parseInt(y)/60).toFixed(2);

  }

  const grandTotal=(t)=>{

    return (totalAmt(t)-totalAmt(t)*0.1).toFixed(2);

  }

  const ConverCamelCase=(sentence)=>{

      return  sentence

      .toLowerCase()

      .replace(/[^a-zA-Z0-9 ]/g, '') // Remove any non-alphanumeric characters

      .split(' ')

      .map((word, index) => word.charAt(0).toUpperCase() + word.slice(1))

      .join(' ');

  }

  return (

      <>

        {today.length > 0 &&

          today.map((item, rowindex) => (

            <tr key={rowindex}>

                <td className="border border-1 w-[90px] text-sm text-center pb-2">{dayjs(item.date).format("DD-MM-YYYY")}</td>

                <td className="border border-1 text-sm pb-2">

                    <div className="w-full relative">

                      <div className={`${clickedRow === rowindex ? increaseFontIcon : 'hidden'} flex justify-between absolute z-20 w-full`}>

                        <span className={`border border-1 bg-indigo-500 text-lg cursor-pointer text-white w-[20px] text-center`} onClick={IncreaseFont}>+</span>

                        <span className="w-full" onClick={() => handleHover(rowindex)}></span>

                        <span className={`border border-1 bg-indigo-500 text-lg cursor-pointer text-white w-[20px] text-center`} onClick={DecreaseFont}>-</span>

                      </div>

                      <div onClick={() => handleHover(rowindex)}  className={`z-10  w-full`} style={{ fontSize: txtsize }}>

                        {item.topics.length>100?item.topics.slice(0,100)+'...':item.topics}

                      </div>

                    </div>

                  </td>

                <td className="border border-1 w-[60px] text-sm text-center pb-2">{convertTime(item.hr)}</td>

                <td className="border border-1 w-[70px] text-sm text-center pb-2">{rateperhr.toFixed(2)}</td>

                <td className="border border-1 w-[80px] text-sm text-center pb-2">{(totalAmt(item.hr)).toFixed(2)}</td>

                <td className="border border-1 w-[80px] text-sm text-center pb-2">{(totalAmt(item.hr)*0.1).toFixed(2)}</td>

                <td className="border border-1 w-[80px] text-sm text-center pb-2">{(totalAmt(item.hr)-totalAmt(item.hr)*0.1).toFixed(2)}</td>

            </tr>

          ))}

          {

            totalTime>0&&

            <>

            <tr>

                 <td className="border border-1 text-right pb-2" colSpan={2}>Total</td>

                 <td className="border border-1 text-center pb-2">{convertTime(totalTime)}</td>

                 <td className="border border-1 text-center pb-2">{rateperhr.toFixed(2)}</td>

                 <td className="border border-1 text-center pb-2">{(totalAmt(totalTime)).toFixed(2)}</td>

                 <td className="border border-1 text-center pb-2">{((totalAmt(totalTime))*0.1).toFixed(2)}</td>

                 <td className="border border-1 text-center pb-2">{grandTotal(totalTime)}</td>

            </tr>

             <tr>

                 <td className="border border-1 text-right pb-2" colSpan={6}>Total : <b>{ConverCamelCase(toWords(grandTotal(totalTime)))}</b> Taka Only</td>

                 <td className="border border-1 text-center pb-2">{grandTotal(totalTime)}</td>

            </tr>

            </>

          }

      </>

  );

}

export default Billprocess2;