Manipulating Template from different Node

Dashboard
1

I have built a UI with node-red-dashboard.

Basically i have several arduinos with ethernet shield sending data to my node-red instance, each data will be parsed by a function node and then generate some html with a ui-template-node. All of these templates are looking identical. Every template will create 4 squares that will light up, based on the data, also there is an icon on every square, with a fixed id.
First thing, i would like to arrange the templates in a 4x3 order in one dashboard group, like so

template template template template
template template template template
template template template template

Can i do that with some template settings in backend, or do i have to do it with css?

But my bigger problem is, i have another data-source which will give me the id mentioned earlier, but no data about the rest of the templates. So i would like to manipulate only the html-element with this id in one of the 12 templates above.

I can do "$('#my-id').css('color', 'red');" in a console window when i am in frontend and i would like to do the same within a node in the backend, whenever an id is sent. I tried it using a function node and with jquerify node, but it doesn't find an element with the id.

Is there a good way, for manipulating data in the dashboard frontend from a node in the backend.

function code:

var number = parseInt(msg.payload);

msg.payload = {
    raw: number,
    plate: {
        plane00: {
            active: (number & Math.pow(2,0)) ? true : false,
            rfid: "rfid-5adc6e",
            name: "B1"
        },
        plane01: {
            active: (number & Math.pow(2,2)) ? true : false,
            rfid: "rfid-361578",
            name: "B2"
        },
        plane02: {
            active: (number & Math.pow(2,4)) ? true : false,
            rfid: "rfid-a4df70",
            name: "B3"
        },
        plane03: {
            active: (number & Math.pow(2,6)) ? true : false,
            rfid: "rfid-30d749",
            name: "B4"
        }
    }
}

return msg;

template code:
<div class="plate">
<div class="plane{{(plane.active == 1) ? ' active' : ''}}" ng-repeat="plane in msg.payload.plate">
<div class="content">{{plane.name}}</div>
<div class="rfid" id="{{plane.rfid}}"></div>
</div>
</div>

2

The function node cannot access the dashboard directly, the right way to manipulate dashboard frontend is via a tag in a ui_template node to do your jquery. Something like:

<div class="plate">
<div class="plane{{(plane.active == 1) ? ' active' : ''}}" ng-repeat="plane in msg.payload.plate">
<div class="content">{{plane.name}}</div>
<div class="rfid" id="{{plane.rfid}}"></div>
</div>
</div>

<script>
(function($scope) {

$scope.$watch('msg', function() {
                $('#' + $scope.msg.payload.raw).css('color', 'red');
        })
    }
 });
})(scope);
</script>
3

thanks a lot, i had found out about scope.$watch just a bit later, i already got it to work, i do create the full template with all 12 plates fixed in html now and send messages with defined msg.payload.type and then using jquery to manipulate the template accordingly =)