How to create a clickable list with multiple values in an element?

Question

I am trying to create a list of names an user could chose from to select a object with multiple hidden values. I work with a PHP backend.

The code I wrote works but I think it is probably not the right way to approach the problem and could be written alot better, but I can't seem to find a better way.

Right now I print a <div> for every object which are clients in my case. Within the div I have four checkboxes that are hidden, which I check and uncheck on the background with a javascript function. The values of those checkboxes is what I need in javascript for an API call after the user choses the client.

I select and deselect the with a javascript function.

foreach($clients as $client) {
 echo '<div class="'.$client->name.'-'.$client->id.' client-style" name="'.$client->name.'">
  <input type="checkbox" class="'.$client->id.'" name="client_id" value="'.$client->id.'">
  <input type="checkbox" class="'.$client->id.'" name="client_fb" value="'.$client->facebook.'">
  <input type="checkbox" class="'.$client->id.'" name="client_insta" value="'.$client->instagram.'">
  <input type="checkbox" " class="'.$client->id.'" name="client_wb" value="'.$client->website.'"></div>';
}

For every element I create an on click event handler

for (var i = 0; i < clientList.length; i++) {
 const {name, id} = clientList[i];

 $(`.${name}-${id}`).on('click', function() {
   selectClientFromList({name, id}); 
 });
}

I am trying to get a list of clickable "names". When a "name" is clicked, you want to get the "name" but also "id", "facebook", "instagram", "website".

Might be useful to use the <select> tag with multiple values like this but I don't want a dropdown. I need a scrollable list, because I also have use searchbar for this list.

With a lot of clients the html would grow fast. How do I clean my php code and keep the information about a client that the user selected?

Thanks in advance!

Answer 1

A good approach can be to use a hidden input. Give your div a class and then

foreach($clients as $client) {
 echo '
  <div class="'. $client->name.'-'.$client->id.' client-style" name="'.$client->name.'">
  <input type="hidden" class="aclass '.$client->id.'" name="client_id" value="'.$client->id.'">
  <input type="hidden" class="aclass '.$client->id.'" name="client_fb" value="'.$client->facebook.'">
  <input type="hidden" class="aclass '.$client->id.'" name="client_insta" value="'.$client->instagram.'">
  <input type="hidden" class="aclass '.$client->id.'" name="client_wb" value="'.$client->website.'"></div>';
}

And then instead of creating a click handler everytime. One works too.

$(`.aclass`).on('click', function() {
   let type = $(this).attr('name'); // client_id or client_fb
   let client_id = $(this).attr('class').replace("aclass",""); // $client->id's value is here
   let value = $(this).val(); // credentials
 });