d3 symbols generation for different columns

I have a csv that has the following structure:

Now, I am trying to build a symbol chart that has the x value as the date and the y value as the value of either A or B.

I would like to have the symbols in A to have the same colors as each other, and group B as well.

The problem is whenever I use my code to do this it gives me only 2 symbols instead of 4. i.e. it gives me one symbol per column not per data point. Also I am not sure how to force all points in the same column to be the same color?

I am using d3 v5

This is my code

var margin = {top: 20, right: 10, bottom: 20, left: 10};
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const timeConv = d3.timeParse("%Y-%m-%d");
const dataset = d3.csv("xxx.csv");
        
    dataset.then(function(data) {
    var slices = data.columns.slice(1).map(function(id) {
        return {
            id: id,
            values: data.map(function(d){
                return {
                    date: timeConv(d.date),
                    measurement: +d[id]
                };
            })
        };
    });
var svg2 = d3.select("body").append("svg")
     .attr("width", (width + margin.left + margin.right))
     .attr("height", (height + margin.top + margin.bottom))
     .attr("transform", "translate(" + margin.left/4 + "," + margin.top/4 + ")"); 

// scales
    const xScale = d3.scaleTime().range([0,width]);
        
    const yScale = d3.scaleLinear().rangeRound([height, 0]);
        
    xScale.domain(d3.extent(data, function(d){
        return timeConv(d.date)}));
        
    yScale.domain([(0), d3.max(slices1, function(c) {
        return d3.max(c.values, function(d) {
            return d.measurement; });
            })
            ]);
      
    // axis
    const yaxis = d3.axisLeft()
    .ticks(9)
    .scale(yScale);

    const xaxis = d3.axisBottom()
    .ticks(d3.timeMonth.every(3))
    .tickFormat(d3.timeFormat('%b %y'))
    .scale(xScale);

var slices2 = slices.filter(slice => RegExp('someRegex').test(slice.id))         
       //console.log(xScale(timeConv(new Date(d.value.date))))
  const symbol = d3.symbol().size(500)
  
  const symbols = svg2_2.append('g').attr('id','symbols').selectAll("symbols")
    .data(slices2)
    .enter()

symbols.append("path").attr("d",  symbol)