使用多个ID的文本增量按钮

Question

我有一个按钮，当按下时会增加所选的文本对象，当我选择第一个对象时，它获取其id并完全增加它的问题是当我选择另一个对象时它获取其id但由于某种原因保留了第一个选定的id以及改变两者。我希望它只显式更改所选对象。任何想法如何使用下面的代码解决它。

    $(document).ready(function(){
        $(".click").click(function(){
            $('#id').val($(this).attr('id'));
            var id = $(this).attr('id');
            $('#font_size').val($(this).attr('font_size'), { id: id });

        $(".increase").click(function(){
            var currentSize = $("#"+id).css('font-size');
            var currentSize = parseFloat(currentSize)*1.2;
            $("#"+id).css('font-size', currentSize);
            alert(id);
        });
        });
    });

<input type="button" class="increase" value=" + ">

<?php

$result = mysqli_query($sql,"SELECT * FROM elements WHERE element_type ='text'") or die(mysql_error());

    while($row = mysqli_fetch_array($result)) {

        $id = $row['element_id'];

        $text_contents = $row['text_contents'];
        $textbox_contents = $row['textbox_contents'];

        $font_size = $row['font_size'];

?>

<p class="click" id="<?php echo $id ?>" style="position:absolute; font-size:<?php echo $font_size ?>px;">
<?php echo $text_contents ?></p>
<?php echo $textbox_contents ?></p>

<?php } ?>