Only getting a portion of text on edit function php

Here’s my code first

// Initiate curl session in a variable (resource)
    $curl_handle = curl_init();

    $url = "xxxxxxxxxx";
    
    // Set the curl URL option
    curl_setopt($curl_handle, CURLOPT_URL, $url);
    
    // This option will return data as a string instead of direct output
    curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, true);
    
    // Execute curl & store data in a variable
    $curl_data = curl_exec($curl_handle);
    
    curl_close($curl_handle);
    
    // Decode JSON into PHP array
    $response_data = json_decode($curl_data);
    
    // Print all data if needed
    // print_r($response_data);
    // die();
    
    // All user data exists in 'data' object
    $user_data = $response_data;
    $counter = 0;

on my HTML

<table id="example2" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Quotes Lists</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <?php if(!empty($user_data)) { ?>
    <?php foreach($user_data as $user){ ?>
    <tr>
      <td>
        <?php echo ++$counter; ?>
      </td>
      <td>
        <?php echo $user->name; ?>
      </td>
      <td>
        <div class="row">
          <div class="col-md-6">
            <button type='button' class='btn btn-primary addAttr' data-toggle='modal' data-target='#modal-edit' data-id=<?php echo $user->id; ?> data-value=<?php echo $user->name; ?>>Edit</button>
          </div>

          <div class="col-md-6">
            <button type='button' class='btn btn-danger addAttr' data-toggle='modal' data-target='#modal-delete' data-id=<?php echo $user->id; ?>>Delete</button>
          </div>
        </div>
        <!-- Modal Start-->
        <div class="modal fade" id="modal-edit">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Edit Item</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                      <span aria-hidden="true">&times;</span>
                                                    </button>
              </div>
              <div class="modal-body">
                <form>
                  <textarea id="name" name="name" class="form-control" rows="5" spellcheck="false">
                                                        
                                                      </textarea>
                </form>
              </div>
              <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
      </td>
    </tr>
    <?php } ?>
    <?php } ?>
  </tbody>
</table>

and on my JS

 $('.addAttr').on('click',function() {
    var id = $(this).attr('data-id');    
    var name = $(this).attr('data-value');
    $('#name').val(name);
    } );

I have this data

Now the problem is that whenever I tried to edit data it’s only getting the portion of a text like this

I am stuck to why I am only getting a portion of a text. Someone, please enlighten me.

Answer

Looks like you need to quote the output of $user->name in the HTML.

e.g

<!-- What you have: -->
<button
    type='button'
    class='btn btn-primary addAttr'
    data-toggle='modal'
    data-target='#modal-edit'
    data-id=<?php echo $user->id; ?>
    data-value=<?php echo $user->name; ?>
>Edit</button>

<!-- With quotes: -->
<button
    type='button'
    class='btn btn-primary addAttr'
    data-toggle='modal'
    data-target='#modal-edit'
    data-id="<?php echo $user->id; ?>"
    data-value="<?php echo $user->name; ?>"
>Edit</button>