JSFiddle - React, Tailwind, and code Playground

by Beardy

HTML

<ul>
            <li><a href="./garage_vehicle.php?mode=add_vehicle"><span>Create a Vehicle</span></a></li>

            <li class="vehicle-view toggleVehicleButton"><a class="vehicleID" href="./garage_vehicle.php?mode=view_own_vehicle&amp;CID=6"><span>2014 Audi A4</span></a>
                <div class="vehicle-actions" style="width: 179px; display: none;">
                    <ul>
                        <li><a href="/board/garage_vehicle.php?mode=view_vehicle">View Vehicle</a></li>
                        <li><a href="/board/garage_vehicle.php?mode=edit_vehicle">Edit Vehicle</a></li>
                        <li><a class="deletevehicle" href="">Delete Vehicle</a></li>
                        <li><a href="/board/garage_modification.php?mode=add_modification">Add Modification</a></li>
                        <li><a href="/board/garage_premium.php?mode=add_premium">Add Insurance</a></li>
                        <li><a href="/board/garage_quartermile.php?mode=add_quartermile">Add Quartermile Time</a></li>
                        <li><a href="/board/garage_dynorun.php?mode=add_dynorun">Add Dynorun</a></li>
                        <li><a href="/board/garage_track.php?mode=add_lap">Add Lap</a></li>
                        <li><a href="/board/garage_service.php?mode=add_service">Add Service</a></li>
                        <li><a href="/board/garage_vehicle.php?mode=view_own_vehicle">Set Main Vehicle</a></li>
                    </ul>
                </div>
            </li>

            <li class="vehicle-view toggleVehicleButton"><a class="vehicleID" href="./garage_vehicle.php?mode=view_own_vehicle&amp;CID=7"><span>2008 Chevrolet Corvette</span></a>
                <div class="vehicle-actions" style="width: 179px;">
                    <ul>
                        <li><a href="/board/garage_vehicle.php?mode=view_vehicle">View Vehicle</a></li>
                        <li><a href="/board/garage_vehicle.php?mode=edit_vehicle">Edit Vehicle</a></li>
                       ...

JavaScript

function getURLParameter(url, name) {
    return (RegExp(name + '=' + '(.+?)(&|$)').exec(url)||[,null])[1];
}



	$('.vehicleID').each(function(i, val){
   		var vehicleIDurl = ($(this).attr('href'));
		var CID = getURLParameter(vehicleIDurl, 'CID');
		$('.vehicle-actions',$(this).closest('li.vehicle-view')).each(function(i, val){
			editCID = $(this).find('a');
			editCID.attr('href', editCID.attr('href') + '&VID=' + CID);
		});
	});


		$(".toggleVehicleButton .vehicleID").click(function (e) {
			e.preventDefault();
			$(this).parent().find(".vehicle-actions").slideToggle("fast");
			$(this).parent().toggleClass("active");
		})