Selecting and deselecting items for 2 state interactions

I am designing a web application which will show rows and columns of data (a table), when the users select (on click) a row within the table, they will get some supplemental data appearing in a side panel. Additionally the users should be able to click multiple rows in order to perform bulk actions e.g. delete entries. At the same time the supplementary data should not appear for multiple rows.

I’m having trouble mixing these two interactions. For example, in the case that the user wants to see the first row and then the second, individually (and in sequence) in order to see their corresponding supplement data, firstly the user will have to select row 1 then deselect it and then select row 2. It just seems a bit clunky.

I thought that if the users single click a row then it will lose focus once the next row is clicked and therefore the row will not be used for performing bulk actions and only to view supplement data. And on a double click the row will be “on hold” and users will be able to select multiple rows by double clicking them in order to perform bulk actions. But my client doesn't really like this method for a web application.

I made a little prototype CLICK HERE TO SEE IT for just selecting and deselecting... it feels like too many clicks.

Any ideas? I’m stuck!!