JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app>
    <div ng-controller="FruitCtrl">
      <table>
          <tr ng-repeat="fruit in fruits" ng-mouseenter="hover(fruit)" ng-mouseleave="hover(fruit)"  ng-hide="hideme != false" ng-show="shdshowme == true">
              <td>{{ fruit.name }}</td>
              <td>{{ fruit.price | currency }}</td>
              <td>{{ fruit.count }}</td>
              <td><a ng-show="fruit.showDelete" ng-click="delete(fruit)">Delete</a></td>
          </tr>
          <tr>
            <td>
              <p >
              Hi There test
              </p>
            </td>
          </tr>
      </table>
  </div>
</div>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

JavaScript

function FruitCtrl($scope) {

    $scope.fruits = [{
        "id": 1,
        "name": "Apple",
        "price": .50,
        "count": 213,
        "showDelete": false,
        "show": true
    }, {
        "id": 2,
        "name": "Orange",
        "price": .45,
        "count": 665,
        "showDelete": false,
        "show": true
    }, {
        "id": 3,
        "name": "Banana",
        "price": .60,
        "count": 146,
        "showDelete": false,
        "show": true
    }, {
        "id": 4,
        "name": "Kiwi",
        "price": .80,
        "count": 199,
        "showDelete": false,
        "show": true
    }];
    //$scope.shdshowme= true;
    $scope.hideme = false;
    $scope.hover = function(fruit) {
        // Shows/hides the delete button on hover
      return fruit.showDelete = ! fruit.showDelete;
    };
    
    $scope.delete = function(fruit) {
        // Hides a row of fruit, if the delete button was clicked
      alert("Deleting the " + fruit.name);
      return fruit.show = ! fruit.show;  
    };
}