Hi,

I have a search bar to search the articles and a attach button in each row.
I can attach the article to case.IT is working fine.But i attaches multiple attachments..
When attach button is clicked it should insert the article and if again another attach button is clicked the inserted row should get deleted and newly clicked row should be inserted..and also when it s attached that row should be removed from table and when another row is attached again the old row should again display in table.

Can anyone help me with achieving this..
componennt:

<lightning:input type="text" name="searchKey" label="Enter" aura:id="searchKey" onchange="{!c.searchKeyChange}" placeholder="Search" />          
    <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
        <thead>
            <tr class="slds-text-heading_label">              
                <th scope="col"><div class="slds-truncate" title="Title">Article Number</div></th>
                <th scope="col"><div class="slds-truncate" title="Title">Article Title</div></th>
                <th scope="col"><div class="slds-truncate" title="Title">Description</div></th>
               <th scope="col"><div class="slds-truncate" title="Title">System</div></th>
                <th scope="col"><div class="slds-truncate" title="Title">Product</div></th>
                <th scope="col"><div class="slds-truncate" title="Title">LastPublishedDate</div></th>
                <th scope="col"><div class="slds-truncate" title="Title">Version</div></th>
               
                            
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.Knowledge__kav}" var="Knowledge__kav">
                <tr>  
                  
                    <td><div class="slds-truncate" title="{!Knowledge__kav.ArticleNumber}">{!Knowledge__kav.ArticleNumber}</div></td>   
                    <td><div class="slds-truncate" title="{!Knowledge__kav.Title}">{!Knowledge__kav.Title}</div></td>
                    <td><div class="slds-truncate" title="{!Knowledge__kav.Description_c}">{!Knowledge__kav.Description__c}</div></td>
                   <td><div class="slds-truncate" title="{!Knowledge__kav.System__r.Name}">{!Knowledge__kav.System__r.Name}</div></td>
                    <td><div class="slds-truncate" title="{!Knowledge__kav.Product__r.Name}">{!Knowledge__kav.Product__r.Name}</div></td>
                     <td><div class="slds-truncate" title="{!Knowledge__kav.LastPublishedDate}">{!Knowledge__kav.LastPublishedDate}</div></td>
                    <td><div class="slds-truncate" title="{!Knowledge__kav.Version__c}">{!Knowledge__kav.Version__c}</div></td>
                    <lightning:button variant="brand-outline"  label="Attach" onclick="{!c.handleClick}" value="{!Knowledge__kav.KnowledgeArticleId}"/>                 
                </tr>
            </aura:iteration>
        </tbody>
    </table> 
                                
Controller:
handleClick : function(component, event, helper) {
        var action = component.get('c.attachArticleToCase');
       let recordId = component.get("v.recordId");
     var KnowledgeArticleId = event.getSource().get("v.value");
      
       action.setParams({
            caseId:recordId,  // Make sure your component implemented force:hasRecordId interface
           articleId: KnowledgeArticleId 
       });
       action.setCallback(this,function(a){
         var state = a.getState(); // get the response state
           if(state == 'SUCCESS') {
              var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
                        "title": "Success!",
                        "message": "Article attached to case",
                        "type": "success"
                    });
        toastEvent.fire();
            }
           else{
               var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
                        "title": "Error!",
                        "message": "error",
                        "type": "Error"
                    });
        toastEvent.fire();
           }
        });
        $A.enqueueAction(action);
       $A.get('e.force:refreshView').fire();
    },

Apex:

 @AuraEnabled
    public static List <Knowledge__kav> getAccounts() {
        return [SELECT Id, Title, KnowledgeArticleId,ArticleNumber,Description__c,System__r.Name,Product__r.Name,LastPublishedDate,Version__c FROM Knowledge__kav ORDER BY createdDate ASC LIMIT 10];
    }
    @AuraEnabled
    public static List<Knowledge__kav> findByTitle(String searchKey) {
        String Title =  + searchKey + '%';
        return [SELECT Id, Title, KnowledgeArticleId,ArticleNumber,Description__c,System__r.Name,Product__r.Name,LastPublishedDate,Version__c FROM Knowledge__kav WHERE Title LIKE :Title];

    }

 @AuraEnabled
    public static String attachArticleToCase(String caseId, String articleId){
       
           String message = 'SUCCESS';
          
         
             CaseArticle ca = new CaseArticle();
             ca.CaseId = caseId;
              ca.KnowledgeArticleId = articleId;
               insert ca;
          

       return message;
    }