使用Jquery的具有特定属性的元素的选择器

Question

这是Javascript Code，我试图在其中添加一个attr内容，该内容表示玩家1的P1和玩家2的p2。选择一个字符时。您在$ this css上看到的位置会在选择按钮后更改按钮背景，但是现在我尝试在用户选择字符后添加P1和P2。查看我分享的图像，以直观地了解我想做什么。

Result I want to achieve

$characters
        .removeClass(oldClass)
        .addClass(newClass)
        .fadeIn('slow');

    $('#charactersname').text(newClass.charAt(0).toUpperCase() + newClass.slice(1));

    $this.css('background-color', '#00cc99').attr('P1');

    characterSelect = $('#characters').attr('class');

    document.getElementById('charselect').innerHTML =
            ' You have selected ' + characterSelect.charAt(0).toUpperCase() + newClass.slice(1);

    choices.push(characterSelect);
}

function performNextAction(){
    if(choices.length < 2){
        confirm(`Player ${choices.length + 1}, choose your character!`);
        $('.grid-container').one('click', 'img', selectCharacter);
    }
    else{
        choices.forEach((choice, index) => localStorage.setItem(`Player${index + 1}`, choice));

        window.location = 'selectbg.html';
    }
}