Html is being tweeted along with the content in jQuery

Question

I am trying to post content from an array in Jquery and the content gets posted on twitter as shown below on a button click.

Also, when there are any special characters in the text, the entire text is not posted.

For example, the content is "This is our job as designers – to continue making decisions until the purpose of the design is perfectly clear. Then you are done." and it is posted as shown below.

Could you please help me how to resolve the two issues mentioned above.

Code for generating the content:

This function gets the quotes from the link and pushes it into the content array.

    function getQuotesFromWeb(){

     $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=40",            function(json) {
            json.forEach(function(val) {
            content.push(val.content + "--" + val.title + "");        
        }); 
      }); 
  };

This method changes the URL based on the quote being displayed.

function generateQuote()
  {     
      var randomNumber = Math.floor(Math.random() * (content.length - 0 + 1)) + 0;
       $("#quotePlace").html(content[randomNumber]);   

     var linkRef = "http://twitter.com/intent/tweet?text=" + content[randomNumber];
      $('.twitter-share-button').attr('href', linkRef);
  };