how to append font awesome icon to paragraph on click

Good day, please I want to append a font awesome icon to paragraph inner text when the p tag is clicked.

I have four p tags with same class .ptn, if any is clicked, I want to append the font awesome to the clicked one, and remove it from others.

The problem is instead of displaying the font awesome arrow, its displaying the tag text instead, also, the first p tag is removed once I click on any of the other p tags.

This is my code below, Html:

     <div class="col-lg-3 col-md-3 col-sm-3 my-4 border-right">          <p id="compliance" class="acting pl-4 pt-3 ptn">Compliance <i class="fas fa-chevron-right pl-4"></i></p>          <p id="summary" class="pl-4 pt-2 ptn">Summary</p>          <p id="audit" class="pl-4 pt-2 ptn">Station Audit</p>          <p id="analysis" class="pl-4 pt-2 ptn">Analysis Format</p>       </div>  

Jquery:

  <script>       var btns = document.getElementsByClassName("ptn");         for (var i = 0; i < btns.length; i++) {          btns[i].addEventListener("click", function () {             var current = document.getElementsByClassName("acting");             current[0].className = current[0].className.replace(" acting", "");             current[0].remove(" <i class='fas fa-chevron-right pl-4'></i>");             this.className += " acting";             this.append(" <i class='fas fa-chevron-right pl-4'></i>");       });      }    </script>  

https://stackoverflow.com/questions/66592417/how-to-append-font-awesome-icon-to-paragraph-on-click March 12, 2021 at 08:17AM