How to add dropdown selected data to table using jquery

I am trying to add data from a select dropdown to a table so in the first table td cell it would display the service name then in the second table td cell it would display the service cost.

I found this on the forum https://stackoverflow.com/questions/41034014/how-to-add-dropdown-selected-data-to-table-using-jquery which works but just adds the service name only so am trying to amend it so it adds the service cost to the second table td cell but am getting stuck with it. Below is what I got so far. I’m not 100% on jquery

I am trying to add data from a select dropdown to a table so in the first table td cell it would display the service name then in the second table td cell it would display the service cost.

I found this on the forum https://stackoverflow.com/questions/41034014/how-to-add-dropdown-selected-data-to-table-using-jquery which works but just adds the service name only so am trying to amend it so it adds the service cost to the second table td cell but am getting stuck with it. It’s not doing anything now when I click the Add To Lost button.

Below is what I got so far. I’m not 100% on jquery

<div class="row">
        <div class="col-lg-4">
        <?php
        include("connectdb.php"); // Database connection using MySQLi

        if($r_set = $mysqli->query("SELECT id, service, cost from service_list")){

        ?>
        <div class="form-group servicename">
             <select id="service" name="service" class="form-control servicelist">
                  <option value="">Select Service</option>

                  <?php
        while ($row = $r_set->fetch_assoc()) {
                  echo "<option data-price=" . $row['cost'] . " value='" . $row['service'] . "'>" . $row['service'] . "</option>";
        }
                  ?>
             </select>
        <?php
     }else{
        echo $mysqli->error;
     }
        ?>
     </div>
    </div>
    <div class="col-lg-4">
        <input type="text" class="form-control form-control-border text-right price-input" readonly>
    </div>
    </div>

<div class="row">
      <input type="button" value="Add To List" class="btn btn-primary submit1" id="submit1" />
</div>

<div class="row">
     <table id="table1" class="table">
            <thead>
                  <tr>
                      <th style="width: 10px">#</th>
                      <th>Task</th>
                      <th>Progress</th>
                      <th style="width: 40px">Label</th>
                  </tr>
             </thead>
                    <tbody></tbody>
      </table>
</div>

    <script>
            $("#submit1").click(function() {
                {
                    var selected = $('.servicelist');
                    selected.each(function() {
                        $('#table1')
                        var tr = $('<tr>')
                            tr.append('<td>' + $(this).val() + '</td>');
                        tr.append('<td>' +(this).val($(this).find(':selected').data('price') + '</td>');
                        $('#table1 tbody').append(tr)
                    });
                }
            });
        </script>

To make it easier for people to help, show the page html. Having to wade through php code and embedded css is a pain. It is a js forum after all.
I think that if you inspected the contents of “this” you would be half way to identifying the problem yourself.

I couldn’t show the page as it’s a admin page and needs to login to see the page, is it better if I create a codepen next time?

I did manage to solve this issue in the end