Как исправить значение, когда HTML-элемент разделяется на несколько HTML-атрибутов

Question

Я добавляю значение в форму HTML, которая генерируется динамически с использованием jQuery, но значение разделяется на атрибуты HTML. Значение является предложением. Первое слово задается как значение, а остальные слова разделяются на атрибуты HTML.

//Here is the sample data being returned

//It's in the URL provided


//Looping through the returned data and dynamically creating a form and append values to it.
          $.each(data.TrainingEvaluationCard['Evaluation_Lines'].Evaluation_Lines, function(key, val) { 
                                        //Append The Table Here Witht the Data
                                        $('tbody').append( '<tr>'+                

                    '<td> <input  class="form-control input-group-md evaluationarea"'+
                            'name="evaluationarea[]"'+
                            'value='+val.Evaluation_Area+''+
                            ' style="font-size: 13px !important; "'+

                            'readonly="readonly"'+
                            'data-validation="required"'+
                            '/>'+
                    ' </td>'+




                    '<td> <input  class="form-control input-group-md evaluationquestion"'+
                            'name="question[]"'+
                            'readonly="readonly"'+
                            'value=' +val.Evaluation_Question+ ''+
                            'style="width: 250px;;"'+
                            '/>'+


                    ' </td>'+
//Here is the result I'm getting

<input class="form-control input-group-md evaluationquestion" name="question[]" readonly="readonly" value="Were" they="" well="" distributed="" around="" the="" class?style="width: 250px;;">

Я ожидаю, что значение оценочного вопроса будет представлять собой весь возвращаемый вопрос, а не только первое слово.