Is there a way to relate channel fields to one another?

Question

I am creating a staff profile page, where I want to display social media icons for any social media sites each staff member may have (see photo).

I don't want to list ALL social media options, but I'd rather have a channel field type "drop-down" with options, and then a corresponding URL field (which can just be a text field). If the user has more than one social media account, there should be a "add another" button on the Publish page, which will add another drop-down and URL field.

The drop-down field will correspond to a Class name (i.e. class="icon-facebook"), which will then place an icon on the published page.

Is this possible, or am I making this too complicated?

Is there another, better solution in order to make this work? Or would it be easier for me to hard-code a "Facebook" field, and a "Facebook_url" field, "twitter," "twitter_url," etc.?

THANK YOU!!!

Answer 1

Have you looked at the Grid fieldtype?
https://ellislab.com/expressionengine/user-guide/add-ons/channel/grid.html

edit: if you need extra validation based on one of the columns (e.g. if an image is selected, validate that a caption is required), then you can insert some jQuery or javascript in a custom accesoire, or more simple, inside the field instructions. Be careful (and test) because the field-instructions do get formatted a bit (e.g. nbsp; inserted).

<script type="text/javascript">
$(document).ready( function(){
    console.log('hello console');
});
</script>
Other normal instruction text

or

<script type="text/javascript" src="/js/custom_grid_validate.js"></script>
Other normal instructions