Implement a delete button for a JavaScript calculator

I'm learning JavaScript(jQuery), so I'm working on a scientific calculator. The delete button works fine when I have input such as; sin(cos(tan(. But when I have a repetition of similar input, say; sin(cos(tan(sin(, it removes the first occurrence of sin(. What I want, is to remove the last occurrence of each input (similar or not). I don't want to delete one letter/character at a time either.

The jQuery code is the closest I've gotten to what I want. I'd appreciate any advice on best practices too, since I'm a beginner.

    <script type="text/javascript" charset="utf-8">
      $("document").ready(function (){
        $("#del").click(function (){
          var x = $("#input-field").val();
          var x_len = $("#input-field").val().length;
          var sin_lindex = x.lastIndexOf("sin");
          var cos_lindex = x.lastIndexOf("cos");
          var tan_lindex = x.lastIndexOf("tan");
          
          if (sin_lindex > cos_lindex && sin_lindex > tan_lindex){
            var value = x.replace("sin(", "");
            $("#input-field").val(value)
          }
          else if (sin_lindex < cos_lindex && cos_lindex > tan_lindex){
            var value = x.replace("cos(", "");
            $("#input-field").val(value)
          }
          else if (tan_lindex > cos_lindex && sin_lindex < tan_lindex){
            var value = x.replace("tan(", "");
            $("#input-field").val(value)
          }
        });
        $(".param").on("click", function (){
          if($("#inv").hasClass("outlaw")){
            document.getElementById("input-field").value += $(this).text().slice(0, -2) + "\u2212" + "\u00b9" + "(";
            document.getElementById("input-field2").value += "Math.a" + $(this).text().slice(0, -2) + "(";
          }
          else{
            document.getElementById("input-field").value += $(this).text() + "(";
            document.getElementById("input-field2").value += "Math." + $(this).text() + "((Math.PI/180)*";
          }
        });
      });
    </script>

The reason that your code "it removes the first occurrence of" is that you're using the replace() method with a string pattern.

The replace() method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match. If pattern is a string, only the first occurrence will be replaced.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

Therefore, you should use Regex (regular expression) in order to identify the last occurance of the term. For that consider checking the elaborated explanation in this answer:

Using regex to replace only the last occurrence of a pattern with JS

and then replace all your replace uses with replace regex and it should work.